2017年9月16日 星期六

full calendar 使用方式

1.NuGet

下載jQuery.Fullcalendar

2.在head
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/moment.min.js"></script>
    <link href="Content/fullcalendar.min.css" rel="stylesheet" />
    <script src="Scripts/fullcalendar.min.js"></script>
3.
在body
<div id="calendar"></div>
4.
在body底加上

      $('#calendar').fullCalendar({
              改變程式的程式
            });
        </script>
5.

  editable: true,
//可移動
   events: [{
                    title: '昨天的活動',
                    start: moment().subtract(3, 'days').format('YYYY-MM-DD')
                },{
                    title: '昨天的活動',
                    start: moment().subtract(1, 'days').format('YYYY-MM-DD')
                }, {
                    title: '持續一周的活動',
                    start: moment().add(7, 'days').format('YYYY-MM-DD'),
                    end: moment().add(14, 'days').format('YYYY-MM-DD'),
                    color: 'lightBlue'
                }],
//輸入資料
                buttonText: { today: '今天', prev: '上個月', next: '下個月' },
//改變字體名字
                header: { left: 'today prev,next', center: '', right: 'title' },
//改變字體位置
                defaultView: 'basicWeek'
//改變成星期模式

沒有留言:

張貼留言