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