xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

calendar time shaper

const dateObj = {
  "id": 191837,
  "productId": 13602,
  "activityEventId": 1623896,
  "ticketCategoryId": 5246754,
  "ticketGroupId": 11798755,
  "start": 1585497600000,
  "end": 1585497600000,
  "ticketsNumber": 100,
  "lowPrice": 127.00,
  "status": 0,
  "priceLowest": false,
  "hasTicket": true,
  "availableNumbers": [
    1,
    2,
    3,
    4,
    5,
    6
  ]
};


const dateShaper = (timestamp = ``) => {
  const date = new Date(timestamp)
  const dateString = date.toLocaleDateString();
  const timeString = date.toLocaleTimeString();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
  const weekDay = weekDays[date.getDay()];
  return {
    dateString,
    timeString,
    year,
    month,
    day,
    weekDay,
  };
}

const calendarConvert = (events = []) => {
  const result = events.map(
    (obj, i) => {
      const {
        id,
        start,// timestamp
        end,
        lowPrice,
        availableNumbers,
      } = obj;
      const {
        dateString,
        timeString,
        year,
        month,
        day,
        weekDay,
      } = dateShaper(start);
      return {
        id,
        start,
        end,
        lowPrice,
        availableNumbers,
        weekDay: `周${weekDay}`,
        year,// 分组
        date: `${month}`.padStart(2, "0") + '.' + `${day}`.padStart(2, "0"),
        // date: `${month + '.' + day}`,
        timeString: timeString.substr(0, 5),
        month,
        day
      };
    }
  );
}

calendar

1. disabled

2. selected

3. month padding

4. first month day

5. fill full month

---