iT邦幫忙

0

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

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

範例

功能規範

  1. 查看行事曆
    • 以週為單位
    • 不能查看過去的時段
  2. 依照不同地區顯示當地時區的時間
    • 行事曆會依照該時區顯示預約時間
  3. 顯示「可預約的時間」和「已被預約」的時間
    • 已被預約的時間會顯示灰色
    • 可被預約的時間會顯示綠色
  4. 參照以下提供預約時間的 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

1 個回答

2
淺水員
iT邦研究生 4 級 ‧ 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}`
    );
});

上面輸出如下(可看到時間有轉換成使用者電腦時間)
https://ithelp.ithome.com.tw/upload/images/20201120/20112943fBV9gOujPu.png
剩下就只是顯示的問題
應該不用寫出來吧

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

我都用moments.js

淺水員 iT邦研究生 4 級 ‧ 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}`
    );
});
alan0219 iT邦新手 5 級 ‧ 2020-11-24 05:33:34 檢舉

希望是能用Vue.js實做出來的功能作為參考/images/emoticon/emoticon02.gif,如果有完整範例那就更好了。

我要發表回答

立即登入回答