"Full Calendar"
Bootstrap 3.3.0 Snippet by Arashi

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://momentjs.com/downloads/moment.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <h1 class="text-center">行事曆標題</h1> <hr> <div id='calendar'></div> </div> </div> </div>
var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, editable: true, events: [ { title: 'All Day Event', start: new Date(y, m, 1), url: 'http://tracy.taironlife.com/' }, { title: 'Long Event', start: new Date(y, m, d-5), end: new Date(y, m, d-2) }, { id: 999, title: 'Repeating Event', start: new Date(y, m, d-3, 16, 0), allDay: false }, { id: 999, title: 'Repeating Event', start: new Date(y, m, d+4, 16, 0), allDay: false }, { title: 'Meeting', start: new Date(y, m, d, 10, 30), allDay: false }, { title: 'Lunch', start: new Date(y, m, d, 12, 0), end: new Date(y, m, d, 14, 0), allDay: false }, { title: 'Birthday Party', start: new Date(y, m, d+1, 19, 0), end: new Date(y, m, d+1, 22, 30), allDay: false }, { title: 'Click for tracy', start: new Date(y, m, 28), end: new Date(y, m, 29), url: 'http://tracy.taironlife.com/' } ], eventClick: function(event) { if (event.url) { //window.open(event.url); alert(event.url); return false; } }, buttonText: { today: '今天', month: '月', week: '週', day: '日' }, allDayText: "整天", timeFormat: { '': 'H:mm{-H:mm}' }, weekMode: "variable", columnFormat: { month: 'dddd', week: 'dddd M-d', day: 'dddd M-d' }, monthNames: ['一月', '二月', '月', '月', '月', '月', '月', '月', '月', '月', '月', '月'], monthNamesShort: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"] });

Related: See More


Questions / Comments: