Jquery Calendar Set Timezone FullCalendar Example Tutorial




Jquery Calendar Set Timezone FullCalendar Example Tutorial

Hi Guys,

Today,I will learn you how to create calendar set timezone fullcalendar using jquery. we will show example of calendar set timezone fullcalendar in jquery.you can easy create calendar set timezone fullcalendar in jquery.

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

Here the example of fullcalendar set timezone in jquery


Now in this example in create basic fullcalendar set timezone fullcalendar for full code:

<!DOCTYPE html>



<title>Fullcalendar Set Timezone Using Jquery Example</title>

<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.css' rel='stylesheet' />

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.js'></script>



<div class="container">

<div class="row">

<div class="col-md-12 mt-5 mb-5">


<select id='time-zone-selector' class="form-control">

<option value='local'>local</option>

<option value='UTC' selected>UTC</option>


<div style='float:right'>

<span id='loading'>loading...</span>


<div id='calendar' class="mt-3"></div>





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

var initialTimeZone = 'UTC';

var timeZoneSelectorEl = document.getElementById('time-zone-selector');

var loadingEl = document.getElementById('loading');

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

var calendar = new FullCalendar.Calendar(calendarEl, {

timeZone: initialTimeZone,

headerToolbar: {

left: 'prev,next today',

center: 'title',

right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'


navLinks: true, // can click day/week names to navigate views

editable: true,

selectable: true,

dayMaxEvents: true, // allow "more" link when too many events

events: 'https://fullcalendar.io/demo-events.json',

loading: function(bool) {

if (bool) {

loadingEl.style.display = 'inline'; // show

} else {

loadingEl.style.display = 'none'; // hide



eventTimeFormat: { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' }



// load the list of available timezones, build the <select> options

// it's highly encouraged to use your own AJAX lib instead of using FullCalendar's internal util

FullCalendar.requestJson('GET', 'https://fullcalendar.io/demo-timezones.json', {}, function(timeZones) {

timeZones.forEach(function(timeZone) {

var optionEl;

if (timeZone !== 'UTC') { // UTC is already in the list

optionEl = document.createElement('option');

optionEl.value = timeZone;

optionEl.innerText = timeZone;




}, function() {

// failure


// when the timezone selector changes, dynamically change the calendar option

timeZoneSelectorEl.addEventListener('change', function() {

calendar.setOption('timeZone', this.value);






It will help you...