2018年1月17日 星期三

(JS) full calendar中華民國政府行政機關辦公日曆表

最佳解析度590x600以上


CSS

標題列周末為紅色 .fc-widget-header .fc-sat(.fc-sun) 
1
2
3
4
 .fc-widget-header .fc-sat,
 .fc-widget-header .fc-sun{
  color:red;
 }

JS

判斷是否為假日item.isHoliday=="是"
建立JSON事件：假日或補假名稱及底色
holidays.push({
          title : item.name,
          start  : item.date,
          allDay: true,
           backgroundColor : "pink",
          borderColor: "pink"
 });
取得現在年月moment(curDate).format('YYYY')  moment(curDate).format('M')
標題變成民國年 $('.fc-left').empty().append("<h2>"+year+ mon+"</h2>");
配合事件變換日期底色
 $(view.el[0]).find('.fc-day[data-date=' + dateString + ']').css('background-color', 'pink');
利用bootstrap tooltip顯示假日名稱
 $(element).tooltip({title: event.title});
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
//open date 人事總處行事曆Json
var site = "http://data.ntpc.gov.tw/api/v1/rest/datastore/382000000A-000077-002";
var url = "https://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent('select * from json where url="' + site + '"') + "&format=json"; 

var holidays = [];

  $.getJSON( url, function(data) {
  //$("#result").html( JSON.stringify(data) );
  //console.log(data.query.results.json.result.records);
  for(var i in data.query.results.json.result.records) {    

    var item = data.query.results.json.result.records[i];   

  if (item.isHoliday=="是")//&&item.holidayCategory!="特定節日")
    {
      holidays.push({ 
          title : item.name,
          start  : item.date,
          allDay: true,
           backgroundColor : "pink",
          borderColor: "pink"
      });
     }else{
    holidays.push({ 
    title : item.holidayCategory,
    start  : item.date,
    allDay: true,
    textColor: "black",
    backgroundColor : "white",
    borderColor: "white"
       });
     }
}

//console.log(event_arr);
  $('#calendar').fullCalendar({
   contentHeight: 'auto',
   viewRender: function(view,element) {
    
     //民國年月
      var curDate =  $('#calendar').fullCalendar('getDate');
      var months = ",1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月".split(",");
      var year = "民國"+ (moment(curDate).format('YYYY') -1911)+"年";
      var mon =months[ moment(curDate).format('M')];
       
    $('.fc-left').empty().append("<h2>"+year+ mon+"</h2>");
    },
   events: holidays,
     eventRender: function (event, element, view) { 
        // event.start is already a moment.js object
        // we can apply .format()
        var dateString = event.start.format("YYYY-MM-DD");
        
        if (event.title!="補行上班日")
        $(view.el[0]).find('.fc-day[data-date=' + dateString + ']').css('background-color', 'pink');
        
        $(element).tooltip({title: event.title});   
     }
  });
});

網頁 Widget Calendar: https://lagendre.github.io/calendar

1
2
3
4
5
6
7
<iframe scrolling="no" 
 style="overflow: hidden;" 
 frameborder="0" 
 width="100%"
 height="390" 
 src="//lagendre.github.io/calendar/" >
</iframe>
參考: Cross Domain 跨網站取得資料yahoo api http://budget-programmer.blogspot.tw/2018/01/cross-domain-yahoo-api.html https://www.codesd.com/item/fullcalendar-custom-override-header-title.html https://myyhhuang.com/2016/03/16/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8full-calendar%E5%A5%97%E4%BB%B6%E5%81%9A%E7%B6%B2%E9%A0%81%E6%97%A5%E6%9B%86/ https://fullcalendar.io/docs/usage/ https://fullcalendar.io/docs/text/locale/

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)