fullcalendar

HTML

<script src="https://fullcalendar.io/js/fullcalendar-3.0.1/lib/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.js"></script>
<select id="color_selector">
  <option value="all">All events</option>
  <option value="red">Ted Talks</option>
  <option value="green">Consumer Electronics Show</option>
  <option value="orange">Taitronics</option>
</select>
<div>
  <div id='calendar'></div>
</div>

CSS

body {
  margin: 40px 10px;
  padding: 0;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 10px auto;
}

.fc-list-item-title a:link,
.fc-list-item-title a:visited {
  color: #447af8;
}

.fc-list-item-title a:hover {
  color: #000000;
  text-decoration: underline;
}

.red .fc-event-dot,
a.fc-day-grid-event.red {
  background-color: red;
  border-color: red;
  color: #FFF !important;
}

.green .fc-event-dot,
a.fc-day-grid-event.green {
  background-color: green;
  border-color: green;
  color: #FFF !important;
}

.orange .fc-event-dot,
a.fc-day-grid-event.orange {
  background-color: orange;
  border-color: orange;
  color: #FFF !important;
}

JavaScript

$('#calendar').fullCalendar({
	  header: {
	    left: 'prev,next today',
	    center: 'title',
	    right: 'listYear,listMonth,listWeek,listDay'
	  },
	  views: {
	    listDay: {
	      buttonText: 'list day'
	    },
	    listWeek: {
	      buttonText: 'list week'
	    },
	    listMonth: {
	      buttonText: 'list month'
	    },
	    listYear: {
	      buttonText: 'list year'
	    }
	  },
	  defaultView: 'listYear',
	  defaultDate: '2016-09-12',
	  navLinks: true, // can click day/week names to navigate views
	  editable: true,
	  eventLimit: true, // allow "more" link when too many events
	  events: [{
	    title: 'Ted Talks 2015',
	    start: '2015-04-26',
	    end: '',
	    url: "https://www.ted.com/talks",
	    className: 'red'
	  }, {
	    title: 'Ted Talks 2016',
	    start: '2016-04-20',
	    end: '',
	    url: "https://www.ted.com/talks",
	    className: 'red'
	  }, {
	    title: 'Ted Talks 2017',
	    start: '2017-04-24',
	    end: '',
	    url: "https://www.ted.com/talks",
	    className: 'red'
	  }, {
	    title: 'Consumer Electronics 2015',
	    start: '2015-01-06',
	    end: '',
	    url: "https://www.ces.tech/",
	    className: 'green'
	  }, {
	    title: 'Consumer Electronics 2016',
	    start: '2016-01-05',
	    end: '',
	    url: "https://www.ces.tech/",
	    className: 'green'
	  }, {
	    title: 'Consumer Electronics 2017',
	    start: '2017-01-08',
	    end: '',
	    url: "https://www.ces.tech/",
	    className: 'green'
	  }, {
	    title: 'Taitronics 2016',
	    start: '2016-10-06',
	    end: '',
	    url: "https://www.taitronics.tw/",
	    className: 'orange'
	  }, {
	    title: 'Taitronics 2015',
	    start: '2015-10-06',
	    end: '',
	    url: "https://www.taitronics.tw/",
	    className: 'orange'
	  }, {
	    title: 'Taitronics 2014',
	    start: '2014-10-13',
	    end: '',
	    url: "https://www.taitronics.tw/",
	    className: 'orange'
	  }, {
	    title: 'Taitronics 2013',
	    start: '2013-10-08',
	    end: '',
	    url:...