Hola,
No consigo crear un calendario de eventos en el cuál los eventos sean un rando. Estoy intentando crear un calendario de vacaciones y necesito que aparezcan los puntos azules y el detalle del evento en cada día del rango de las vacaciones
Código:
<template>
<div class="page" data-name="calendar_vacaciones">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="right">
<a class="" href="#">
<i class="f7-icons material-icons md-only" style="margin-right: 20px" id="nueva_vaca">compose</i>
</a>
</div>
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Atrás</span>
</a>
</div>
<div class="title navbar-calendar-title"></div>
</div>
</div>
<div class="page-content">
<div id="calendar_vacaciones" class="block block-strong no-padding no-margin no-hairline-top"></div>
<div id="calendar-events-vacaciones" class="list no-margin no-hairlines no-ios-left-edge">
<ul></ul>
</div>
</div>
</div>
</template>
<style>
#calendar, #calendar-events {
height: 50%;
box-sizing: border-box;
}
#calendar .calendar {
height: 100%;
}
#calendar-events ul {
height: 100%;
overflow: auto;
}
@media (orientation: landscape) {
#calendar {
float: left;
}
#calendar, #calendar-events {
height: 100%;
}
#calendar, #calendar-events {
width: 50%;
}
#calendar-events {
margin-left: 50% !important;
border-left: 1px solid #eee;
}
.theme-dark #calendar-events {
border-left-color: #282828;
}
}
</style>
<script>
var today = new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate()+1);
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var date = new Date();
var items = window.localStorage.getItem("vacaciones");
items = JSON.parse(items);
var items_new = [];
for (var i = 0; i <= items.length-1; i++) {
//console.log(new Date(items[i].date));
items_new.push({
date: new Date(items[i].date),
title: items[i].title,
id_vaca: items[i].id_vaca,
empleado: items[i].empleado
});
}
return {
data: function () {
return {
today: new Date(year, month, day),
events: items_new,
//events: [
//new Date(2018, 9, 3),
//new Date(2018, 9, 4)
//]
}
},
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
);
});
var eventsHtml = '';
if (currentEvents.length) {
eventsHtml = currentEvents
.map(function (event) {
var hours = event.date.getHours();
var minutes = event.date.getMinutes();
if (minutes < 10) minutes = '0' + minutes;
return '<li class="item-content">' +
'<div class="item-inner" id="vv" data-id-vaca='+(event.id_vaca)+'>' +
'<div class="item-title">' + (event.empleado)+ ' - ' +(event.title)+ '</div>' +
//'<div class="item-after">' + (hours + ':' + minutes) + '</div>' +
'</div>' +
'</li>';
})
.join('');
} else {
eventsHtml = '<li class="item-content">' +
'<div class="item-inner">' +
'<div class="item-title text-color-gray">Sin datos </div>' +
'</div>' +
'</li>';
}
self.$el.find('.list ul').html(eventsHtml);
},
},
on: {
pageInit: function (e, page) {
var self = this;
var app = self.$app;
var $ = self.$;
var monthNames = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto' , 'Septiembre' , 'Octubre', 'Noviembre', 'Diciembre'];
var dayNamesShort = ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'];
var dayNames = ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'];
self.calendar = app.calendar.create({
containerEl: '#calendar_vacaciones',
toolbar: false,
value: [self.today],
events: self.events.map(function (event) {
return new Date(event.date.getFullYear(), event.date.getMonth(), event.date.getDate());
//return (tomorrow);
}),
on: {
init: function (calendar) {
$('.navbar-calendar-title').text(monthNames[calendar.currentMonth] +', ' + calendar.currentYear);
app.navbar.size(page.navbarEl);
calendar.$el.addClass('no-ios-right-edge');
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>