Fullcalendar 4 Add Event Example




Fullcalendar 4 Add Event Example

Hi Guys,

Today our leading topic is fullcalendar 4 add event example. This tutorial will give you simple example of fullcalendar 4 add event. this example will help you fullcalendar add event example code. this example will help you fullcalendar 4 add event basic example.

I will show the example of fullcalendar 4 add event.I will show basic example of fullcalendar 4 add event. we will create fullcalendar add event using version 4 you can get code of add eventin fullcalendar. we give you example of step by step fullcalendar add event, you can simple copy bellow code and use in your project. It's pretty easy and simple example of fullcalendar 4 add event.In this example, you can easy to create fullcalendar 4 add event.

Here the example of fullcalendar 4 add event

Add Event Code:


title: 'Add Event....',

start: 2020-02-18,

allDay: true



Now in this example in create basic fullcalendar add event for full code:

<!DOCTYPE html>



<meta charset='utf-8' />

<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css' rel='stylesheet' />

<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css' rel='stylesheet' />

<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css' rel='stylesheet' />

<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.css' rel='stylesheet' />


html, body {

font-size: 14px;

background: #e2e2e2;



width: 80%;

margin-left: 100px;

box-shadow: 0px 0px 10px #000;


background: #fff;


#calendar-container {

position: fixed;

top: 0%;

text-align: center;

left: 10%;

right: 10%;

bottom: 20%;





<div id='calendar-container'>

<h1>Fullcalendar 4 Add Event Example - Nicesnippets.com</h1>

<div id='calendar'></div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.js'></script>


document.addEventListener('DOMContentLoaded', function() {

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {

plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],

header: {

center: 'addEventButton'


customButtons: {

addEventButton: {

text: 'add event...',

click: function() {

var dateStr = prompt('Enter a date in YYYY-MM-DD format');

var date = new Date(dateStr + 'T00:00:00'); // will be in local time

if (!isNaN(date.valueOf())) { // valid?


title: 'dynamic event',

start: date,

allDay: true


alert('Great. Now, update your database...');

} else {

alert('Invalid date.');












It Will help you...