Skip to content

All topics  /  jQuery

Jquery Calendar Set Timezone FullCalendar Example Tutorial

jQuery ·

When “Jquery Calendar Set Timezone FullCalendar Example Tutorial” moves through design, development and browser testing, visit this page can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

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/[email protected]/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/[email protected]/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...

More on this topic