I'm currently working on a fullCalendar Project (v3, version of the template I'm using).
What I need to do is create a doc where it print all the events of the current month matching the current $_SESSION['nomeUtente'] (the current logged-in user).
e.g. If I have 2 events in March, 3 in April and 5 in May, by clicking on a button I open another link where it shows only the events on March.
My events are saved in this database: 
And this is my calendar: 
the blue button on the bottom right is where I want to link the other page that show the events.
My issue is: I don't know how to get the events of the current month.
I tried to sketch some code in JS but I'm stuck:
function getEvents(year, month){
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1); // print last day of prev month
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0); // print last day of current month
}
I did this code because i think from this two variables i can do something like:
if(starts > firstDay && ends <= lastDay){
print *events of current month*
}
If someone can help me it would be nice
Also one of my doubts is: should I use PHP or JavaScript?
Code I sketch in PHP
<?php
require_once "../config.php";
session_start();
$thisMonth = date("Y-m-t"); //prendere l'ultimo giorno del mese corrente
$previousMonth = date('Y-m-d', strtotime('last day of previous month')); //prendere l'ultimo giorno del mese passato
$nextMonth = date('Y-m-d', strtotime('last day of next month')); //prendere l'ultimo giorno del mese successivo
$nomeUtente = $_SESSION['nomeUtente'];
$starts = $_POST['starts'];
$ends = $_POST['ends'];
if ($starts > $previousMonth && $ends <= $thisMonth){
$sql = "SELECT * FROM assenze WHERE nomeUtente = '$nomeUtente', ename = '$ename', starts >= '$starts', ends <= '$ends' ";
}
I'm also undecided if the $starts, $ends and $sql are right :/
this is my calendar.js
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define('/App/Calendar', ['exports', 'Site', 'Config'], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require('Site'), require('Config'));
} else {
var mod = {
exports: {}
};
factory(mod.exports, global.Site, global.Config);
global.AppCalendar = mod.exports;
}
})
(this, function (exports, _Site2, _Config) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getInstance = exports.run = exports.AppCalendar = undefined;
var _Site3 = babelHelpers.interopRequireDefault(_Site2);
var AppCalendar = function (_Site) {
babelHelpers.inherits(AppCalendar, _Site);
function AppCalendar() {
babelHelpers.classCallCheck(this, AppCalendar);
return babelHelpers.possibleConstructorReturn(this, (AppCalendar.__proto__ || Object.getPrototypeOf(AppCalendar)).apply(this, arguments));
}
babelHelpers.createClass(AppCalendar, [{
key: 'initialize',
value: function initialize() {
babelHelpers.get(AppCalendar.prototype.__proto__ || Object.getPrototypeOf(AppCalendar.prototype), 'initialize', this).call(this);
this.$actionToggleBtn = $('.site-action-toggle');
this.$addNewCalendarForm = $('#addNewCalendar').modal({
show: false
});
}
},
{
key: 'process',
value: function process() {
babelHelpers.get(AppCalendar.prototype.__proto__ || Object.getPrototypeOf(AppCalendar.prototype), 'process', this).call(this);
this.handleFullcalendar();
this.handleSelective();
this.handleAction();
this.handleListItem();
this.handleEventList();
}
},
{
key: 'handleFullcalendar',
value: function handleFullcalendar() {
var myOptions = {
header: {
left: 'today',
center: 'prev,title,next',
right: 'none'
//right: 'month,listWeek' <- bugged in too many ways
},
buttonText:{
today: 'Oggi',
month: 'Mese',
week: 'Settimana',
day: 'Giorno',
list: 'Elenco'
},
locale:'it',
allDaySlot: false,
selectable: true,
selectHelper: true,
timeFormat: 'H(:mm)',
//editable: true, permette di spostare gli eventi
eventLimit: true,
navLinks: true, //selezionando il giorno visualizza elenco eventi
windowResize: function windowResize(view) {
var width = $(window).outerWidth();
var options = Object.assign({}, myOptions);
options.events = view.calendar.clientEvents();
options.aspectRatio = width < 667 ? 0.5 : 1.35;
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar(options);
},
//apre modal per aggiungere nuovo evento
select: function select(event) {
$('#addNewEvent').modal('show');
$('#calendar').fullCalendar('refetchEvents',event._id)
},
//triggherà apertura modal di #editEvent
eventClick: function eventClick(event) {
$('#editEname').val(event.title);
$('event.id').val(event.idAssenza);
$('editNomeUtente').val(event.nomeUtente);
$('#editDescrizione').val(event.descrizione);
$('#editStarts').val(event.start.toISOString());
$('#editEnds').val(event.end.toISOString());
$('#editNewEvent').modal('show').one('hidden.bs.modal', function (e) {
event.title = $('#editEname').val();
event.start = $('#editStarts').val();
event.end = $('#editEnds').val();
event.descrizione = $('#editDescrizione').val();
$.ajax({
url: 'eventi/updateEvent.php',
type: 'POST',
data: {start: event.start, _id: event.idAssenza, end: event.end, title: event.title, descrizione: event.descrizione},
success: function(html){
location.reload();
}
});
$('#calendar').fullCalendar('updateEvent', event._id);
});
},
/* //btn '+' verde in basso a destra
eventDragStart: function eventDragStart() {
$('.site-action').data('actionBtn').show();
},
eventDragStop: function eventDragStop() {
$('.site-action').data('actionBtn').hide();
},
//fine btn */
events: {
url: 'eventi/load.php',
method:'POST'
},
droppable: false,
eventRender: function eventRender( event, element, view ) {
//decide il colore in base al tipo di assenza
if(event.title == "Normali") {
element.css('background-color', '#6d4c41');
}
else if(event.title == "Straordinarie") {
element.css('background-color', '##c0ca33');
}
else if(event.title == "Ferie") {
element.css('background-color', '#e53935');
}
else if(event.title == "Malattia") {
element.css('background-color', '#ffa000');
}
else if(event.title == "Permesso") {
element.css('background-color', '#9fa8da');
}
else if(event.title == "Smart Working") {
element.css('background-color', '#00acc1');
}
else if(event.title == "Trasferta") {
element.css('background-color', '#00897b');
}
else if(event.title == "Assenza non retribuita") {
element.css('background-color', '#546e7a');
}
else if(event.title == "Altro") {
element.css('background-color', '#5e35b1');
}
//elimina eventi
if (view.name == 'listDay') {
element.find(".fc-list-item-time").append("<span class='closeon'>X</span>");
} else {
element.find(".fc-content").prepend("<span class='closeon'>X</span>");
}
element.find(".closeon").on('click', function() {
var deleteMsg = confirm("Vuoi davvero eliminare " + event.title + "?");
if (deleteMsg == true) {
$.ajax({
url: 'eventi/deleteEvent.php',
type: 'POST',
data: {_id: event.idAssenza, nomeUtente: event.nomeUtente},
success: function(html){
location.reload();
},
error: function(html){
alert("Non puoi eliminare questo evento!");
}
})
$('#calendar').fullCalendar('removeEvents',event._id);
} else {
;
}
});
//get the values from all selected checkboxes
var selections = [];
$("input[name=calendario]:checked").each(function(){
selections.push($(this).val());
});
var showEvent = false;
if (selections.indexOf("Ore Personali") >= 0 && event.nomeUtente == $("#nomeUtente").data('value')) showEvent = true; //show if the OP box is ticked and the event belongs to the current user
if (selections.indexOf("Assenze") >= 0 && event.nomeUtente != $("#nomeUtente").data('value')) showEvent = true; //show if the assenze box is ticked and the event belongs to another user
/* if (event.nomeUtente == $("#nomeUtente").data('value') && event.title == 'Normali' && event.title == 'Straordinarie') showEvent = true;
if (event.nomeUtente != $("#nomeUtente").data('value') && event.title == 'Normali' && event.title == 'Straordinarie') showEvent = false; */
return showEvent;
/* var view = $('#calendar').fullCalendar('getView');
alert("The view's title is " + view.title + view); */
}
};
$('input[name=calendario]').on('change',function(){
$('#calendar').fullCalendar('rerenderEvents');
})
var _options = void 0;
var myOptionsMobile = Object.assign({}, myOptions);
myOptionsMobile.aspectRatio = 0.5;
_options = $(window).outerWidth() < 667 ? myOptionsMobile : myOptions;
$('#editNewEvent').modal();
$('#calendar').fullCalendar(_options);
}
},
{
function getEvents(year, month){
var date = new Date();
var firstDay = new Date(date.getFullYear(),
date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(),
date.getMonth() + 1, 0);
var currentEvents = $('#calendar').fullCalendar('clientEvents').filter(event => (new Date(event.start) >= firstDay && new Date(event.end) <= lastDay));
for(i=0; i<currentEvents.length; i++) {
console.log(currentEvents[i].title);
}
}
}
]);
return AppCalendar;
}
(_Site3.default);
var instance = null;
function getInstance() {
if (!instance) {
instance = new AppCalendar();
}
return instance;
}
function run() {
var app = getInstance();
app.run();
}
exports.AppCalendar = AppCalendar;
exports.run = run;
exports.getInstance = getInstance;
exports.default = AppCalendar;
});
