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 data 人事總處行事曆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 = [];
var holidayStr = function(item){				
  return  { 
          title : item.name,
          start  : item.date,
          allDay: true,
   	      backgroundColor : "pink",
          borderColor: "pink"
     		 };
 }
 
var workdayStr = function(item){
	return		{ 
		  title : item.holidayCategory,
		  start  : item.date,
		  allDay: true,
		  textColor: "black",
		  backgroundColor : "white",
		  borderColor: "white"
	      };
}
 
var workdayStr = function(item){
	return		{ 
		  title : item.holidayCategory,
		  start  : item.date,
		  allDay: true,
		  textColor: "black",
		  backgroundColor : "white",
		  borderColor: "white"
	      };
}

  $.getJSON( url, function(data) {
  for(var i in data.query.results.json.result.records) {    

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

		if (item.isHoliday=="是")//&&item.holidayCategory!="特定節日")
    {
    	if (item.holidayCategory!="特定節日"){
      	  holidays.push( holidayStr(item) );        
      }else{
      	var myDate= new Date(item.date);	
      	if(myDate.getDay() == 6 || myDate.getDay() == 0)
        	 holidays.push( holidayStr(item) );
         else
         	holidays.push( workdayStr(item) );
      }   
     }else{
		  		holidays.push( workdayStr(item) );
	    }
}

//console.log(event_arr);
  $('#calendar').fullCalendar({
  	fixedWeekCount: false,
  	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+...