I have this script that get JSON value from server and then post them on Fullcalendar, the extraction and post value works perfectly but the problem that sometimes I got more than one value on JSON result.
my code is below
.done(function (data) {
var html = ""
console.log(data);
console.log(data[0].events)
let calendar = new FullCalendar.Calendar(calendarEl, {
// On charge le composant "dayGrid"
plugins: ['dayGrid', 'timeGrid', 'list'],
//defaultView: 'listMonth',
//local :'fr', //traduction,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,list'
},
buttonText: {
today: 'aujourd\'hui',
month: 'Mois',
week: 'Semaine',
list: 'liste'
},
events: [
{
title: data[0].events.title,
start: data[0].events.start,
end: "2020-05-18 18:00:00"
},
],
nowIndicator: true
});
the data containe JSON result which is like below :
what I want is this :
if the data[i] > 1 how can I modify my code in order to display all the potential value and if there is another data at the same time and date then it is displayed also next to the first one
the part that needs to be modified is below
events: [
{
title: data[0].events.title,// 0 is first index, how to place i incrementation
start: data[0].events.start,
end: "2020-05-18 18:00:00"
},
],
Any idea please ?
Best Regards
Since data is an array, you can iterate over it like so:
.done(function (data) {
var html = ""
console.log(data);
console.log(data[0].events)
const events = data.map((row)=>{
return {
title: row.events.title,
start: row.events.start,
end: "2020-05-18 18:00:00"
}
})
let calendar = new FullCalendar.Calendar(calendarEl, {
// On charge le composant "dayGrid"
plugins: ['dayGrid', 'timeGrid', 'list'],
//defaultView: 'listMonth',
//local :'fr', //traduction,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,list'
},
buttonText: {
today: 'aujourd\'hui',
month: 'Mois',
week: 'Semaine',
list: 'liste'
},
events,
nowIndicator: true
});
Related
thank you for taking a moment to help, if you can!
I am building a weather app and there's a page that I'm working on that needs to have latitude and longitude be updated frequently from a users phone.
i realize that there are two methods to do this...
getCurrentPosition()
watchPosition()
and I'm not really sure how to get the latitude/longitude into the request
Here is the code that I'm using
<link rel="stylesheet" href="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.css">
<script src="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.js"></script>
<!--// target DOM element where WeatherBlox will be rendered //-->
<div id="wxblox" class="aeris-wrapper"></div>
<script>
// set Aeris account access keys
const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
aeris.on('ready', () => {
// create desired WeatherBlox instance
var view = new aeris.wxblox.layouts.local.Main('#wxblox', {
obs: {
advisories: {
enabled: true
},
threats: {
enabled: true
}
},
nearby: {
request: {
limit: 4
}
},
shortterm: {
request: {
limit: 3
}
},
forecast: {
type: "detailed"
},
maps: {
animation: {
enabled: true,
autoplay: false,
alwaysShowPast: false,
alwaysShowFuture: false,
from: -2,
to: 0,
duration: 2,
endDelay: 1,
intervals: 10
},
controls: {
layers: [
{
value: "radar",
title: "Radar"
},{
value: "satellite",
title: "Satellite"
},{
value: "alerts",
title: "Advisories"
},{
value: "temperatures,clip-us-flat",
title: "Temps"
}
],
regions: [
{
zoom: 7,
title: "Local"
},{
zoom: 5,
title: "Regional"
}
]
}
}
});
// load data and render the view for a specific location
view.load({
p: "Latitude, Longitude"
});
});
</script>
At the bottom where it says p:"Latitude, Longitude" is where I would need the results of those geolocation methods, as variables, to be placed. Perhaps more clearly it should be "Users Latitude, Users Longitude"
The user opens the app and this is the first page that they will see. This is a local weather conditions page which gets data from the closest weather observation point to the user.
IF I had to choose between the two methods, I would probably prefer watchPosition since it keeps up with the users location as they move.
Thank you for any help you may offer
Sincerely,
Justin
Call view.load() in the success callback of getCurrentPosition().
// load data and render the view for a specific location
Geolocation.getCurrentPosition(pos => {
console.log(`Showing weather for lat ${pos.coords.latitude}, long ${pos.coords.longitude}`);
view.load({p: `${pos.coords.latitude}, ${pos.coords.longitude}`});
}, err => console.log(`Geolocation error: ${err.message}`));
Full code:
// set Aeris account access keys
const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
aeris.on('ready', () => {
// create desired WeatherBlox instance
var view = new aeris.wxblox.layouts.local.Main('#wxblox', {
obs: {
advisories: {
enabled: true
},
threats: {
enabled: true
}
},
nearby: {
request: {
limit: 4
}
},
shortterm: {
request: {
limit: 3
}
},
forecast: {
type: "detailed"
},
maps: {
animation: {
enabled: true,
autoplay: false,
alwaysShowPast: false,
alwaysShowFuture: false,
from: -2,
to: 0,
duration: 2,
endDelay: 1,
intervals: 10
},
controls: {
layers: [{
value: "radar",
title: "Radar"
}, {
value: "satellite",
title: "Satellite"
}, {
value: "alerts",
title: "Advisories"
}, {
value: "temperatures,clip-us-flat",
title: "Temps"
}],
regions: [{
zoom: 7,
title: "Local"
}, {
zoom: 5,
title: "Regional"
}]
}
}
});
console.log("Getting Geolocation");
// load data and render the view for a specific location
Geolocation.getCurrentPosition(pos => {
console.log(`Showing weather for lat ${pos.coords.latitude}, long ${pos.coords.longitude}`);
view.load({
p: `${pos.coords.latitude}, ${pos.coords.longitude}`
});
}, err => console.log(`Geolocation error: ${err.message}`));
});
I had a previous version of fullCalendar and it was working perfectly, the code for it is below:
$('#calendar').fullCalendar({
events:
{
url: '/modules/ajax/ajax_handler.php',
method: 'POST',
data: {
action: 'getBookingEventInfo'
},
success: function(response) {
console.log(response);
},
failure: function() {
alert('there was an error while fetching events!');
},
},
header:
{
center: 'month,agendaWeek,list'
},
minTime: '9:00:00',
maxTime: '23:00:00',
allDaySlot: false,
aspectRatio: 2.5
});
But I have just upgraded to v5 and have attempted to get the events through the same method and i get a response of 0 which implies the php query didn't work but it is working. Here is the current code:
New calendar
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
events:
{
url: '/modules/ajax/ajax_handler.php',
method: 'POST',
data: {
action: 'getBookingEventInfo'
},
failure: function() {
alert('there was an error while fetching events!');
},
},
header:
{
center: 'month,agendaWeek,list'
},
minTime: '9:00:00',
maxTime: '23:00:00',
allDaySlot: false,
aspectRatio: 2.5
});
calendar.render();
});
PHP:
function getBookingEventInfo($connection, $premisesCode) {
$dates = array();
$query = "SELECT reservation_date, count(*), r.start_time, r.end_time FROM bookings b JOIN reservation_time_data r ON r.id = b.reservation_time
WHERE premises_code = ? AND reservation_processed NOT IN ('no-show', 'removed') GROUP BY reservation_date";
if($stmt = $connection->prepare($query)){
$stmt->bind_param('s', $premisesCode);
$stmt->execute();
$stmt->bind_result($date, $count, $startTime, $endTime);
while($stmt->fetch()){
$dates[] = array(
"title" => $count." reservations.",
"start" => formatDate($date, 14)." ".$startTime,
"end" => formatDate($date, 14)." ".$endTime,
"url" => "/rapido/view-reservation-queue/".formatDate($date, 14)
);
}
$stmt->close();
}
return json_encode($dates);
}
I want to render only events assigned for a specific user. At start fullcalendar render events for logged user (it works). Further, I am using selectlist to send choosen userid to controller. In response I get json with all events of selected user.
I've tried to use 'eventSources', but when I try to call function with selected events, I can't use 'callback' cause of error in console: "Uncaught TypeError: callback is not a function at Object.success"
I do the following:
fullcalendar init
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
height: 700,
header: {
left: 'agendaDay,agendaWeek,month',
right: 'none'
},
eventRender(event, $el) {
$el.qtip({
content: {
title: event.title,
},
hide: {
event: 'unfocus'
},
show: {
solo: true
},
position: {
my: 'top left',
at: 'bottom left',
viewport: $('#calendar-wrapper'),
adjust: {
method: 'shift'
}
}
});
},
eventSources: [
getEvents,
getAnotherUserEvents
],
});
Function with events of logged user:
function getEvents(start, end, timezone, callback) {
const apiUrl = "https://localhost:44308/event/";
$.ajax({
url: apiUrl + '/getevents',
type: 'GET',
dataType: 'json',
success: function (doc) {
var events = [];
if (doc != undefined && doc.length > 0) {
doc.forEach(function (entry) {
entry.destinationTimeViewModel.forEach(function (dt) {
events.push({
title: dt.subject,
description: dt.description,
start: dt.startedAt,
end: dt.endedAt
});
});
events.push({
title: entry.subject,
description: entry.description,
start: entry.startedAt,
end: entry.endedAt,
color: entry.color,
user: entry.users,
id: entry.id
});
});
}
callback(events);
},
});
};
Function with events of selected user (data contains selected user Id)
function getAnotherUserEvents(start, end, timezone, callback, data) {
const apiUrl = "https://localhost:44308/event/";
$.ajax({
type: 'POST',
url: apiUrl + '/GetAnotherUserEvents',
dataType: 'json',
data: {
"Id": data.id,
},
success: function (doc) {
var events = [];
if (doc != undefined && doc.length > 0) {
doc.forEach(function (entry) {
entry.destinationTimeViewModel.forEach(function (dt) {
events.push({
title: dt.subject,
description: dt.description,
start: dt.startedAt,
end: dt.endedAt
});
});
events.push({
title: entry.subject,
description: entry.description,
start: entry.startedAt,
end: entry.endedAt,
});
});
}
callback(events);
},
})
}
Do you have any ideas how can I display only events of selected user?
I'm injecting the data into the handlebars calendar page via event as shown in the controller bellow
router.get('/', function(req, res, next) {
Event.find().then((events) => {
console.log(events);
res.render('calendar', { title: 'Calendar', calendarlink: true, event: events });
}, (err) => {
res.status(400).send(err);
})
});
The data is showing in the console log but I cannot get it to display on the calendar.hbs
this is the code for the calendar hbs
$('#calendar').fullCalendar({
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'prev,next today'
},
firstDay: 1, // 1(Monday) this can be changed to 0(Sunday) for the USA system
defaultView: 'month',
themeSystem: 'bootstrap3',
events: {{event}},
eventRender: function(event, element) {
element.find('.fc-title').append("<br/> " + event.description);
$(element).tooltip({
title: "Description: " + event.description
});
}
})
The event option looks like this with the rendered JSON:
events: {
_id: 5a0757fa94aad82784cbf8a1,
title: 'SampleEvent',
start: 2017-11-11T22:34:00.000Z,
end: 2017-11-15T07:00:00.000Z,
address: 'Paris HQ, LA',
description: 'Get ready to live a moment of your lifetime',
__v: 0
},
{
_id: 5a0761055876ab10dc00a71f,
title: 'NewEvent',
start: 2017-11-06T08:00:00.000Z,
end: 2017-11-06T15:00:00.000Z,
address: 'digital hub',
description: 'All are invited',
__v: 0
},
I have a full calendar and I need to show its month and year in dropdown list, I know this question is already asked but still not answered there. I am new to full calendar and as per as i know it is updated now hope there is some easiest way to achieve rather than giving it gotodate option. I have created code pen for the calendar if anyone has done this before then please update my codepen and give me link thank you so much...
demoToEdit
Below is my code I have added some of the functions of full calendar as you see I am not able to get on which event I should right dropdown year and month so I have not done it.
$(window).load(function(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
eventRender: function(event, element, view) {
for (var i = 0; i<= event.products.length - 1; i++) {
element.append('<span>'+event.products[i].name+'<span>');
};
},
events: [
{
title: 'EventName',
start: '2016-05-02',
products:[
{
name:'ProductName'
}
]
},
{
title: 'Event',
start: '2016-05-03',
products:[
{
name:'ProductName1'
},
{
name:'ProductName2'
},
{
name:'ProductName3'
},
]
},
{
title: 'EventName',
start: '2016-05-13',
products:[
{
name:'ProductName1'
},
{
name:'ProductName2'
}
]
},
{
title: 'Event',
start: '2016-05-15',
products:[
{
name:'ProductName'
}
]
},
{
title: 'EventNAme',
start: '2016-05-21',
products:[
{
name:'ProductName1'
},
{
name:'ProductName2'
}
]
},
{
title: 'Event',
start: '2016-05-23',
products:[
{
name:'ProductName1'
},
{
name:'ProductName2'
}
]
},
{
title: 'Eventname',
start: '2016-05-25',
products:[
{
name:'ProductName'
}
]
},
{
title: 'Event',
start: '2016-05-29',
products:[
{
name:'ProductName'
}
]
}
],
dayClick: function(date, allDay, jsEvent, view) {
console.log('date'+date.format('DD/MMM/YYYY')+"allDay"+allDay.title+"jsEvent"+jsEvent+"view"+view)
}
});
})
[1]: http://codepen.io/sud/pen/LNvZmv
It is hard to insert drop downs using fullcalendar custom buttons. I simply make header option to false and created custom header myself. Then you can insert any thing to header part and bind events to those buttons and call appropriate fullcalendar function. example functions that available are
prev (),
next (),
prevYear (),
nextYear (),
today (),
gotoDate ()