11-Apr-2023
.
Admin
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
Example
Now in this example in create basic fullcalendar set timezone fullcalendar for full code:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 mt-5 mb-5">
<label>Timezone:</label>
<select id='time-zone-selector' class="form-control">
<option value='local'>local</option>
<option value='UTC' selected>UTC</option>
</select>
<div style='float:right'>
<span id='loading'>loading...</span>
</div>
<div id='calendar' class="mt-3"></div>
</div>
</div>
</div>
<script>
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' }
});
calendar.render();
// 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;
timeZoneSelectorEl.appendChild(optionEl);
}
});
}, function() {
// failure
});
// when the timezone selector changes, dynamically change the calendar option
timeZoneSelectorEl.addEventListener('change', function() {
calendar.setOption('timeZone', this.value);
});
});
</script>
</body>
</html>
It will help you...
#Fullcalendar
#Jquery