I am using F7 V4. Now I am playing around with the calendar-page element, like you can see in the Kitchensink. In the code of the calendar-events I can not see a setting to see a new event for a new date.
My code:
<script>
return {
data: function () {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
return {
eventItems: [],
events: [
{
date: new Date(2019, 2, 21),
hours: 12,
minutes: 30,
title: 'Meeting with Vladimir',
color: '#2196f3',
},
{
date: new Date(year, month, day),
hours: 12,
minutes: 30,
title: 'Meeting with Vladimir',
color: '#ffd700',
},
{
date: new Date(year, month, day),
hours: 18,
minutes: 0,
title: 'Shopping',
color: '#4caf50',
},
{
date: new Date(year, month, day),
hours: 21,
minutes: 0,
title: 'Gym',
color: '#e91e63',
},
{
date: new Date(year, month, day + 2),
hours: 16,
minutes: 0,
title: 'Pay loan',
color: '#2196f3',
},
{
date: new Date(year, month, day + 2),
hours: 21,
minutes: 0,
title: 'Gym',
color: '#ff9800',
},
],
}
},
methods: {
renderEvents: function (calendar) {
var self = this;
var currentDate = calendar.value[0];
var currentEvents = self.events
.filter(function (event) {
return (
event.date.getTime() >= currentDate.getTime() &&
event.date.getTime() < currentDate.getTime() + 24 * 60 * 60 * 1000
);
});
const eventItems = [];
if (currentEvents.length) {
currentEvents.forEach(function (event) {
const hours = event.hours;
let minutes = event.minutes;
if (minutes < 10) minutes = `0${minutes}`;
eventItems.push({
title: event.title,
time: `${hours}:${minutes}`,
color: event.color,
});
});
}
self.$setState({
eventItems: eventItems,
});
},
},
on: {
pageInit: function (e, page) {
var self = this;
var app = self.$app;
var $ = self.$;
var monthNames = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August' , 'September' , 'Oktober', 'November', 'Dezember'];
self.calendar = app.calendar.create({
containerEl: '#calendar',
toolbar: false,
value: [self.today],
events: self.events,
on: {
init: function (calendar) {
$('.navbar-calendar-title').text(monthNames[calendar.currentMonth] +', ' + calendar.currentYear);
app.navbar.size(page.navbarEl);
calendar.$el.addClass('no-safe-area-right');
self.renderEvents(calendar);
},
monthYearChangeStart: function (calendar) {
$('.navbar-calendar-title').text(monthNames[calendar.currentMonth] +', ' + calendar.currentYear);
app.navbar.size(page.navbarEl);
},
change: function (calendar) {
self.renderEvents(calendar);
},
}
});
},
pageBeforeRemove() {
var self = this;
self.calendar.destroy();
},
},
}
</script>
Above you can see that I am trying to have a new date on day 21st of FEB 2019. But there is no event for this day in the calendar. Please help!
Solution: The problem was the number that represent the month in Javascript. It was wrong in my code. Now it works!