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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.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/datepicker/0.6.3/datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/ja.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
<div class="container">
  <div class="row">
    <div id="calendar" class="col-md-12"></div>
    <div class="repeat col-md-12">
    <h2>繰り返しパターン</h2>
                                <div class="repeat-container">
                                	<div class="m-b">
                                    	
                                    	<div class="radio">
    									  <label><input type="radio" name="optradio">毎日</label>
    									</div>
    									<div class="radio form-inline">
    									  <label><input type="radio" name="optradio">毎週</label>
    									  <select class="form-control" name="account">
    										<option>毎週</option>
    										<option>第1</option>
    										<option>第2</option>
   ...

CSS

.container{
  margin-top: 15px;
}

.repeatPeriod, .repeatTimerange{
  display: none;
}

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,
    selectable: 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: ['日', '月', '火', '水', '木', '金', '土'],
    buttonText: {
      prev: '<', // <
      next: '>', // >
      prevYear: '<<', // <<
      nextYear: '>>', // >>
      today: '今日',
      month: '月',
      week: '週',
      day: '日'
    },
    allDayText: '終日',
    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: function(start, end, timezone, callback) {
var events = [];
var _startTime = start.unix()*1000;
var _endTime = end.unix()*1000;
for(var i=_startTime;i<_endTime;i=i+1000*60*60*24){
var _now = new Date(i);
if(_now.getDay() === 2){
events.push({
title: "毎週火曜イベント",
start: _now,
allDay:true,
color: 'blue'
}); 
}else if(_now.getDay() === 4){
events.push({
title: "毎週木曜イベント",
start: _now,
allDay:true,
color: 'red'
});
}
} 
callback(events);
}
  });

$('[name=repeat-period]').on('click', function () {
        if ($('input[name=repeat-period]:eq(1)').prop('checked')) {
        	$('.repeatPeriod').show();
	    } else {
	        $('.repeatPeriod').hide();
	    }
    });

    $('[name=repeat-timerange]').on('click', function () {
        if ($('input[name=repeat-timerange]:eq(1)').prop('checked')) {
        	$('.repeatTimerange').show();
	    }...