Calendar

https://codepen.io/nijin39/pen/JbQBXM

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div class="ui container">

  <div class="ui menu">
    <div class="header item">EuroBytes</div>
    <a class="active item">Link</a>
    <a class="item">Link</a>
    <div class="ui dropdown item">
      Dropdown
      <i class="dropdown icon"></i>
      <div class="menu">
        <div class="item">Action</div>
        <div class="item">Another Action</div>
        <div class="item">Something else here</div>
        <div class="divider"></div>
        <div class="item">Separated Link</div>
        <div class="divider"></div>
        <div class="item">One more separated link</div>
      </div>
    </div>
    <div class="right menu">
      <div class="item">
        <div class="ui action left icon input">
          <i class="search icon"></i>
          <input type="text" placeholder="Search">
          <button class="ui button">Submit</button>
        </div>
      </div>
      <a class="item">Link</a>
    </div>
  </div>
</div>



<div class="ui container">
  <div class="ui grid">
    <div class="ui sixteen column">
      <div id="calendar"></div>
    </div>
  </div>
</div>

JavaScript

$(document).ready(function() {

	  $('#calendar').fullCalendar({
	    header: {
	      left: 'prev,next today',
	      center: 'title',
	      right: 'month,basicWeek,basicDay'
	    },
	    defaultDate: '2021-12-12',
	    navLinks: true, // can click day/week names to navigate views
	    editable: true,
	    eventLimit: true, // allow "more" link when too many events
	    events: [{
	        title: 'All Day Event',
	        start: '2021-12-01'
	      },
	      {
	        title: 'Long Event',
	        start: '2021-12-07',
	        end: '2021-12-10'
	      },
	      {
	        id: 999,
	        title: 'Repeating Event',
	        start: '2021-12-09T16:00:00'
	      },
	      {
	        id: 999,
	        title: 'Repeating Event',
	        start: '2021-12-16T16:00:00'
	      },
	      {
	        title: 'Conference',
	        start: '2021-12-11',
	        end: '2021-12-13'
	      },
	      {
	        title: 'Meeting',
	        start: '2021-12-12T10:30:00',
	        end: '2021-12-12T12:30:00'
	      },
	      {
	        title: 'Lunch',
	        start: '2021-12-12T12:00:00'
	      },
	      {
	        title: 'Meeting',
	        start: '2021-12-12T14:30:00'
	      },
	      {
	        title: 'Happy Hour',
	        start: '2021-12-12T17:30:00'
	      },
	      {
	        title: 'Dinner',
	        start: '2021-12-12T20:00:00'
	      },
	      {
	        title: 'Birthday Party',
	        start: '2021-12-13T07:00:00'
	      },
	      {
	        title: 'Click for Google',
	        url: 'https://google.com/',
	        start: '2021-12-28'
	      }
	    ]
	  });

	});