iT邦幫忙

1

FullCalendar問題請教

  • 分享至 

  • xImage

最近在做行事曆,大部分的功能都已經完成

https://ithelp.ithome.com.tw/upload/images/20190821/20110132ZrRdCzWsKY.jpg

剩下少部分的一些問題,想請問一下
1.是關於CDN的問題
這是我使用的CDN

<link  <!-- Moment.js v2.20.0 -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.0/moment.min.js"></script>
    <!-- FullCalendar v3.8.1 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.1/fullcalendar.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.1/fullcalendar.print.css" rel="stylesheet" media="print">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.1/fullcalendar.min.js"></script>

後來我點選這些CDN網址並右鍵下載下來後,有一個無法正常使用

 <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.1/fullcalendar.print.css" rel="stylesheet" media="print">

https://ithelp.ithome.com.tw/upload/images/20190821/20110132x1UjHikceJ.jpg

2.不知道我那個標題8月 2019能否改8月108呢?然後不知道這個標題能不能點下去
後變成這種類型呢?
https://ithelp.ithome.com.tw/upload/images/20190821/201101324EfnGzbVYj.jpg

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
dragonH
iT邦超人 5 級 ‧ 2019-08-21 13:30:43
最佳解答

codepen

1 .

你那張圖片已經是正常運作的狀態

不信的話

你把

 <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.1/fullcalendar.print.css" rel="stylesheet" media="print">

拿掉

就知道了

然後

如果你是指沒有 background color 的話

應該是正常的

試想

一般的印表機在同個位置

同時噴上背景跟內容會發生什麼事/images/emoticon/emoticon11.gif

所以他才只用 border 而已

2 .

title 請見 codepen

date dropdown 應該是差不多的做法

看更多先前的回應...收起先前的回應...
tenno081 iT邦研究生 4 級 ‧ 2019-08-21 14:53:26 檢舉

感謝解答,不過目前遇到一些問題,
我把您的CODE移到VSCODE是可以正常運作的
不過移到我自己的VISUAL STUDIO卻是這樣
https://ithelp.ithome.com.tw/upload/images/20190821/201101320PeAaNZhjk.jpg

後來稍微修改一下
https://ithelp.ithome.com.tw/upload/images/20190821/20110132Oh0GSf5jFW.jpg

目前是這樣

這是我這支完整的程式碼,有點長

 $(document).ready(function () {
            //var events = [];
            var selectedEvent = null;
            FetchEventAndRenderCalendar();
            function FetchEventAndRenderCalendar() {
                events = [];
                $.ajax({
                    url: '@Url.Content("~/PDNurse/FullCalendar/GetCalendarData")',
                    type: "GET",
                    dataType: "JSON",
                    success: function (data) {
                        $.each(data, function (i, data) {
                            events.push({
                                guid: data.GUID,
                                cid: data.CID,
                                start: moment(data.START_DATETIME).format('YYYY-MM-DD'),
                                end: moment(data.END_DATETIME).format('YYYY-MM-DD'),
                                content: data.CONTENT,
                                item: data.SELECT_ITEM,
                                title: data.TITLE,
                                empid: data.EMP_ID,
                                creuid: data.CRE_UID,
                                moduid: data.MOD_UID,
                                credate: moment(data.CRE_DATE).format('YYYY-MM-DD'),
                                moddate: moment(data.MOD_DATE).format('YYYY-MM-DD'),
                                tubeGuid: data.tubeGuid,
                            });
                        })
                        GenerateCalender(events);
                    },
                    error: function (error) {
                        alert('failed');
                    }
                })
            }
            function GenerateCalender(events) {
                $('#calender').fullCalendar('destroy');
                $('#calender').fullCalendar({
                    defaultView: 'month',
                    editable: true,
                    selectable: true,
                    header: { // 頂部排版
                        left: "prev,next prevYear,nextYear today", // 左邊放置上一頁、下一頁和今天
                        center: "title", // 中間放置標題
                        right: "month,basicWeek,basicDay" // 右邊放置月、周、天
                    },
                    viewRender: function (view, element) { 
                        if(view.name === 'listDay') { 
                            element.find('.fc-widget-header').append('<span>&raquo; My Text</span>'); 
                        } 
                    },
                    dayNamesShort: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
                    dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
                    monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                    //monthNamesShort : [ "1", "2", "3", "4", "5", "6", "7", "8", "9","10", "11", "12" ],
                    //nextText : "下個月",
                    //prevText : "上個月",
                    buttonText: {
                        today: '今天',
                        month: '月',
                        week: '週',
                        day: '日',
                        prev: "上個月",
                        next: '下個月',
                        prevYear: '去年',
                        nextYear:'明年',
                    },
               
            events: events,
            //編輯畫面
            eventClick: function (calEvent, jsEvent, view) {
                selectedEvent = calEvent;
                var data = {
                    GUID: selectedEvent.guid
                };
                $.ajax({
                    url: '@Url.Content("~/PDNurse/FullCalendar/Update")',
                    content: 'application/json',
                    type: "GET",
                    dataType: "JSON",
                    data: data,
                    success: function (d) {
                        if (d != "") {
                            $('#TITLE').val(d.TITLE);
                            $('#StartDateString').val(d.StartDateString)
                            $('#EndDateString').val(d.EndDateString)
                            $('#CONTENT').val(d.CONTENT)
                            $('#SELECT_ITEM').val(d.SELECT_ITEM)
                            $('#GUID').val(d.GUID)
                            $('#CID').val(d.CID)
                            $('#MOD_UID').val(d.MOD_UID)
                            $('#MOD_DATE').val(d.MOD_DATE)
                            $('#CRE_UID').val(d.CRE_UID)
                            $('#CRE_DATE').val(d.CRE_DATE)
                            $('#EMP_ID').val(d.EMP_ID)
                            $('#TubeGuid').val(d.TubeGuid)
                        }

                    }
                })
                $('#myModal').modal('show');
            },
            //新增畫面
            select: function (start, end) {
                var startdate = start.format('YYYY/MM/DD ')
                var enddate = end.format('YYYY/MM/DD ')
                $('#TITLE').val('');
                $('#SELECT_ITEM').val('')
                $('#CONTENT').val('')
                var data = {
                    startdate: startdate,
                    enddate: enddate,
                }
                $.ajax({
                    url: '@Url.Content("~/PDNurse/FullCalendar/Transdate")',
                    content: 'application/json',
                    type: "GET",
                    dataType: "JSON",
                    data: data,
                    success: function (d) {
                        if (d != "") {
                            $('#StartDateString').val(d.StartDateString)
                            $('#EndDateString').val(d.EndDateString)
                            $('#EMP_ID').val(d.EMP_ID)
                            $('#CID').val(d.CID)
                            $('#GUID').val("")
                            $('#TubeGuid').val(d.TubeGuid)
                        }
                    }
                })
                $('#myModal').modal('show');
            },
            eventDrop: function (event) {
                var data = {
                    CONTENT: event.content,
                    TITLE: event.title,
                    start: event.start.format('YYYY/MM/DD'),
                    end: event.end != null ? event.end.format('YYYY/MM/DD') : null,
                    GUID: event.guid,
                    CID: event.cid,
                    SELECT_ITEM: event.item,
                    EMP_ID: event.empid,
                    MOD_UID: event.moduid,
                    CRE_UID: event.creuid,
                    MOD_DATE: moment(event.moddate).format('YYYY/MM/DD HH:mm:ss '),
                    CRE_DATE: moment(event.credate).format('YYYY/MM/DD HH:mm:ss '),
                }
                SaveDropdEvent(data);
            }
        })
        }
        //儲存
        $('#save').on('click', function () {
            if ($('#TITLE').val().trim() == "") {
                alert('標題請填入');
                return;
            }
            var startdate = $('#StartDateString').val()
            var enddate = $('#EndDateString').val()
            var MOD_DATE = $('#MOD_DATE').val()
            var CRE_DATE = $('#CRE_DATE').val()

            var mod = new Date(MOD_DATE);
            var data = {
                CONTENT: $('#CONTENT').val(),
                TITLE: $('#TITLE').val(),
                start: startdate,
                end: enddate,
                GUID: $('#GUID').val(),
                CID: $('#CID').val(),
                SELECT_ITEM: $('#SELECT_ITEM').val(),
                EMP_ID: $('#EMP_ID').val(),
                MOD_UID: $('#MOD_UID').val(),
                CRE_UID: $('#CRE_UID').val(),
                MOD_DATE: moment(MOD_DATE).format('YYYY/MM/DD HH:mm:ss '),
                CRE_DATE: moment(CRE_DATE).format('YYYY/MM/DD HH:mm:ss '),
                tubeguid: $('#TubeGuid').val(),
            }
            SaveEvent(data);
        });
        function SaveEvent(data) {
            $.ajax({
                type: "POST",
                url: '@Url.Content("~/PDNurse/FullCalendar/AddOrUpdate")',
                data: data,
                success: function (data) {
                    if (data.SELECT_ITEM == "2") {
                        var guid = data.TubeGuid
                        if (guid == null) {
                            alert("尚未點選病患,即將進入病患清單")
                            window.location = '@Url.Content("~/PDNurse/InfusionTube/InfusionList/?guid=")' + guid;
                        } else {
                            window.location = '@Url.Content("~/PDNurse/InfusionTube/InfusionList/?guid=")' + guid;
                        }
                    } else if (data.SELECT_ITEM == "1") {
                        window.location = '@Url.Content("~/PDNurse/Peritonitis/PeritEvalList")'
                    }
                    else {
                        FetchEventAndRenderCalendar();
                        $('#myModal').modal('hide');
                    }
                },
                error: function () {
                    alert('Failed');
                }
            })
        }
        function SaveDropdEvent(data) {
            $.ajax({
                type: "POST",
                url: '@Url.Content("~/PDNurse/FullCalendar/Savedropdata")',
                data: data,
                success: function (data) {
                    if (data != "") {
                        FetchEventAndRenderCalendar();
                        $('#myModal').modal('hide');
                    }
                },
                error: function () {
                    alert('Failed');
                }
            })
        }
        //刪除
        $('#delete').click(function () {
            if (selectedEvent != null && confirm('確定刪除?')) {
                $.ajax({
                    type: "POST",
                    url: '@Url.Content("~/PDNurse/FullCalendar/Delete")',
                    data: { 'guid': selectedEvent.guid },
                    success: function (data) {
                        if (data != "") {
                            FetchEventAndRenderCalendar();
                            $('#myModal').modal('hide');
                        }
                    },
                    error: function () {
                        alert('Failed');
                    }
                })
            }
        })
        })
dragonH iT邦超人 5 級 ‧ 2019-08-21 14:58:25 檢舉

vs 不支援 ES6 嗎/images/emoticon/emoticon19.gif

或許可以參考

tenno081 iT邦研究生 4 級 ‧ 2019-08-21 15:39:45 檢舉

原來是ES6阿,怪不得VSCODE可以使用,我的VS2013卻不能
但看起來好像暫時無解
Resharper這個好像要付費@@

dragonH iT邦超人 5 級 ‧ 2019-08-21 15:45:46 檢舉

好像到 vs 2015 才有支援?!

參考

話說社群版 vs 不是免費嗎

沒有特別要求的話

可以考慮看看

tenno081 iT邦研究生 4 級 ‧ 2019-08-21 16:12:54 檢舉

社群版?您指的是Resharper?
這這是我目前改的樣子

                        debugger;
                        const date = $('#calendar').fullCalendar('getDate').toDate();
                        const title = ''.concat((ate.getMonth() + 1).toString(), '月', (date.getFullYear() - 1911).toString());
                        $("#calendar").find('.fc-toolbar > div > h2').text(title);
                    },

執行的時候出現@@
https://ithelp.ithome.com.tw/upload/images/20190821/20110132FVViVfoypi.jpg

dragonH iT邦超人 5 級 ‧ 2019-08-21 16:21:53 檢舉
console.log($('#calendar'));
console.log($('#calendar').fullCalendar);

... etc

一個一個 log

看哪邊有問題

然後我說的社群版是說 visual studio 唷

連結

然後建議你可以那些 ajax call

自己包成一個 function

不然每次 ajax 都要寫一長串

感覺有點亂/images/emoticon/emoticon13.gif

tenno081 iT邦研究生 4 級 ‧ 2019-08-21 17:29:56 檢舉

謝謝,最後再請問一個問題

http://jsfiddle.net/du5e1j46/
我在上面加了一個datepiker

這是我參考的網頁
https://jsfiddle.net/tyjp20c3/

不知道為什麼不知道為什麼無法像參考網頁那樣正常使用
我只是把datepicker的樣式改成bootstrap
請問這會影響到嗎?

froce iT邦大師 1 級 ‧ 2019-08-21 19:46:49 檢舉

...的確能正常使用啊。

dragonH iT邦超人 5 級 ‧ 2019-08-21 19:51:37 檢舉

因為你用了

bootstrap-datepicker

他並沒有

onChangeMonthYear

這種東西

codepen

你可以在你的 code 補上

console.log(day)

會發現根本都沒被觸發

然後你還需要解決 Calendar 跟 piacker 時間同步的問題

tenno081 iT邦研究生 4 級 ‧ 2019-08-22 09:12:44 檢舉

原來如此,謝謝

tenno081 iT邦研究生 4 級 ‧ 2019-08-22 10:54:19 檢舉

https://ithelp.ithome.com.tw/upload/images/20190822/2011013260uI5VbZqF.jpg

大致上改好了,TITLE我是這樣處理的
https://ithelp.ithome.com.tw/upload/images/20190822/20110132ygdnyygAPw.jpg

感謝各位

1
froce
iT邦大師 1 級 ‧ 2019-08-21 14:12:37

fullcalendar有整包的zip檔可以下載。
不要去抓CDN的。

標題可以試試看:
https://fullcalendar.io/docs/date-formatting#formatting-functions
要注意傳入的date不一定是datetime物件。

dragonH iT邦超人 5 級 ‧ 2019-08-21 20:09:39 檢舉

他用是舊版的

很多東西好像都沒有XD/images/emoticon/emoticon01.gif

然後真心覺得

他們的 doc 寫得有夠難用

froce iT邦大師 1 級 ‧ 2019-08-21 21:21:38 檢舉

js一堆doc都很難用,fullcalendar算是寫的ok的了。
然後...建議去看看nextcloud的developer doc,他的api幾乎是把函式名重寫一遍。Orz

dragonH iT邦超人 5 級 ‧ 2019-08-21 22:09:43 檢舉

/images/emoticon/emoticon10.gif

我要發表回答

立即登入回答