如何用Vue實做像是這樣的課表行事曆？

vue.js 課表行事曆

alan0219 2020-11-20 09:44:18 ‧ 1617 瀏覽

分享至

請問該如何用Vue.js達成像是這樣的課表行事曆範例呢？

功能規範

查看行事曆
- 以週為單位
- 不能查看過去的時段
依照不同地區顯示當地時區的時間
- 行事曆會依照該時區顯示預約時間
顯示「可預約的時間」和「已被預約」的時間
- 已被預約的時間會顯示灰色
- 可被預約的時間會顯示綠色
參照以下提供預約時間的 JSON，請預設有個 API URL，回傳以下資料格式

{
  "available":[
    {
      "start":"2020-07-17T10:30:00Z",
      "end":"2020-07-17T11:00:00Z"
    },
    {
      "start":"2020-07-17T13:00:00Z",
      "end":"2020-07-17T14:00:00Z"
    },
    {
      "start":"2020-07-18T05:30:00Z",
      "end":"2020-07-18T07:00:00Z"
    }
  ],
  "booked":[
    {
      "start":"2020-07-17T11:00:00Z",
      "end":"2020-07-17T13:00:00Z"
    },
    {
      "start":"2020-07-17T14:00:00Z",
      "end":"2020-07-17T15:00:00Z"
    },
    {
      "start":"2020-07-18T07:00:00Z",
      "end":"2020-07-18T08:00:00Z"
    },
    {
      "start":"2020-07-18T11:30:00Z",
      "end":"2020-07-18T13:00:00Z"
    }
  ]
}

參考範例如：範例

請問有高手可以提供完整的範例可供研究參考嗎？用Vue.js完成的，感恩。

dragonH iT邦超人 5 級 ‧ 2020-11-20 10:47:52 檢舉

參考這個 https://bit.ly/2IRqnZu

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

淺水員

iT邦大師 6 級 ‧ 2020-11-20 11:38:15

時間(時區)處理可以參考

function utcstr2date(utcstr) {
    let mch=utcstr.match(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+)Z/);
    if(!mch){
        return null;
    }
    //取得「年月日時分秒」的陣列，注意這是 UTC 日期
    let d=mch.slice(1).map(x=>parseInt(x, 10));
    d[1]-=1; //Date 月份計算是從0開始
    //以 UTC 建立 Date 物件
    return new Date(Date.UTC.apply(null, d));
}
//轉換 available 時間資料，這邊的 data 是後端傳來的資料
let availableArray=data.available.map(o=>{
    return {
        'start': utcstr2date(o.start),
        'end': utcstr2date(o.end),
        'type': 'available'
    }
});
//轉換 booked 時間資料
let bookedArray=data.booked.map(o=>{
    return {
        'start': utcstr2date(o.start),
        'end': utcstr2date(o.end),
        'type': 'booked'
    }
});
//將 available 跟 booked 合併並排序
let arr=availableArray.concat(bookedArray).sort((a,b)=>{
    return a.start.getTime()-b.start.getTime();
});
//時區資訊
const timezoneName=Intl.DateTimeFormat().resolvedOptions().timeZone;
const timezoneValue=(new Date().getTimezoneOffset())/-60;
//之後看要怎麼輸出
console.log(`目前時區為：${timezoneName} (${timezoneValue})`);
arr.forEach(o=>{
    const s='日一二三四五六';
    let d=o.start;
    console.log(
        `${d.getFullYear()}/${d.getMonth()+1}/${d.getDate()}`+
        `(${s[d.getDay()]}) `+
        `${d.getHours()}:${d.getMinutes()} ${o.type}`
    );
});

上面輸出如下（可看到時間有轉換成使用者電腦時間）

剩下就只是顯示的問題
應該不用寫出來吧

回應 3
分享
檢舉

froce iT邦大師 1 級 ‧ 2020-11-20 12:01:02 檢舉

我都用moments.js

淺水員 iT邦大師 6 級 ‧ 2020-11-20 16:21:25 檢舉

moments.js 版本
滿好用的

//轉換 available 時間資料
let availableArray=data.available.map(o=>{
    return {
        'start': moment(o.start),
        'end': moment(o.end),
        'type': 'available'
    }
});
//轉換 booked 時間資料
let bookedArray=data.booked.map(o=>{
    return {
        'start': moment(o.start),
        'end': moment(o.end),
        'type': 'booked'
    }
});
//將 available 跟 booked 合併並排序
let arr=availableArray.concat(bookedArray).sort((a,b)=>{
    return a.start.diff(b.start);
});
//時區資訊
const timezoneName=moment.tz.guess();
const timezoneValue=moment().utcOffset()/60;
//之後看要怎麼輸出
console.log(`目前時區為：${timezoneName} (${timezoneValue})`);
arr.forEach(o=>{
    const s='日一二三四五六';
    let d=o.start;
    console.log(
        d.format('YYYY/MM/DD')+
        `(${s[d.day()]}) `+
        o.start.format('HH:mm')+
        ` ${o.type}`
    );
});