Thursday, 16 February 2023

On selecting different Timezone from the list Fullcalendar is not changing the dates of events

I am trying to change the timezone by selecting a different timezone from the dropdown. When I try to select UTC or local, It works fine, but when I choose any other, it doesn't change the calendar dates. What am I doing wrong? I can see the changed timezones in console.log. I want to show these date and time on calendar."**

This is my code.

    <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://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
    <script src="https://momentjs.com/downloads/moment-timezone-with-data.min.js"></script>

<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
      eventDidMount: function(info) {
      var tooltip = new Tooltip(info.el, {
        title: info.event.extendedProps.days,
        placement: 'top',
        trigger: 'hover',
        container: 'body'
      });
    },
      // events: 'https://fullcalendar.io/demo-events.json',
      events: [{"title":"ThetaHealing Manifesting","url":"http:\/\/wordpress.local\/product\/thetahealing","start":"2023-03-03T07:00:00Z","end":"2023-03-04T14:00:00Z","extraParams":{"days":"2 Days Classes ","date":"Time (UTC): 07:00 am to 02:00 pm"}},{"title":"ThetaHealing","url":"http:\/\/wordpress.local\/product\/thetahealing-you","start":"2023-02-13T02:00:00Z","end":"2023-02-14T09:00:00Z","extraParams":{"days":"2 Days Classes ","date":"Time (UTC): 02:00 am to 09:00 am"}},{"title":"ThetaHealinge","url":"http:\/\/wordpress.local\/product\/thetahealing-you","start":"2023-03-23T17:00:00Z","end":"2023-03-24T23:59:00","extraParams":{"days":"2 Days Classes ","date":"Time (UTC): 05:00 pm to 11:59 pm"}}],

      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();
    calendar.on('dateClick', function(info) {
  console.log('clicked on ' + info.dateStr);
});
    
    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
    });
    timeZoneSelectorEl.addEventListener('change', function() {
  var newTimeZone = this.value;
  var newEvents = calendar.getEvents().map(function(event) {
    var start = event.start;
    var end = event.end;
    var sstart    = moment.tz(start, newTimeZone);
    var eend    = moment.tz(end, newTimeZone);
  console.log(sstart.format('DD-MM-YYYYTh:mm:ssZ')+' '+newTimeZone+' New Start');
  console.log('');

    event.start = sstart.format('DD-MM-YYYYTh:mm:ssZ');
    event.end = eend.format('DD-MM-YYYYTh:mm:ssZ');
    return event;
  });

  calendar.setOption('timeZone', newTimeZone);
    calendar.render();
});
  });
</script>


from On selecting different Timezone from the list Fullcalendar is not changing the dates of events

No comments:

Post a Comment