JSFiddle - React, Tailwind, and code Playground

by Jq7LxKdg

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/ja.js"></script>
<div class="container">
<div class="row">
<div id="calendar" class="col-md-12"></div>
</div>
</div>

JavaScript

$(document).ready(function() {
		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month agendaWeek agendaDay'
			},
			defaultDate: '2017-10-04',
			defaultView: 'agendaWeek',
			editable: true,
      monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      dayNames: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
      dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
      views: {
                month: {
                    columnFormat: 'ddd',
                    titleFormat: 'YYYY年M月D日',
                    titleRangeSeparator: ' ~ ',
                },
                week: {
                    columnFormat: 'M/D[(]ddd[)]',
                    titleFormat: 'YYYY年M月D日',
                    titleRangeSeparator: ' ~ ',
                },
                day: {
                    titleFormat: 'YYYY年M月D日',
                }
            },
			events: [
				{
					title: '終日イベント',
					start: '2017-10-4',
          allDay: true,
				},
			]
		});
		
	});