JSFiddle - React, Tailwind, and code Playground

by lagendre

HTML

<link rel="stylesheet" href="https://fullcalendar.io/js/fullcalendar-3.8.0/fullcalendar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-3.8.0/fullcalendar.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-3.8.0/locale/zh-tw.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2>中華民國政府行政機關辦公日曆表</h2>
<div id='calendar'></div>

CSS

//.fc-day-grid-event .fc-content{ white-space: normal!important; }
	.fc-widget-header .fc-sat,
	.fc-widget-header .fc-sun{
		color:red;
	}
	h2 {
		text-align: center;
	}

JavaScript

//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});   
     }
		});


});