I'm trying to use FullCalendar.js in my application, the problem is that I'm going to add events to the calendar from db, and I don't know how to pass the json to it, example:
The way that works:
$(document).ready(function() {
$('#calendar').fullCalendar({
events: [
{
title: 'Event 1',
start: '2021-08-01'
},
{
title: 'Event 2',
start: '2021-08-07',
end: '2021-08-10'
},
],
selectable: true,
editable: true,
});
What I need to do is to manipulate the json to add my events to the calendar, I tried to do in this way, but it did not work:
var obj = [{title: 'Event 1',start: '2021-08-01'},{title: 'Event 2',start: '2021-08-07',},];
var json = JSON.stringify(obj);
$(document).ready(function() {
$('#calendar').fullCalendar({
events: json,
selectable: true,
editable: true,
});
Can someone help me with that ? Thanks a lot!
Related
How can I save the data? In json or in any other format.
Its demo fullcalendar
Docs Date Clicking & Selecting
My main page:
Html code where i load data from list:
.
<html><head>
<meta charset="utf-8">
<link href="../lib/main.css" rel="stylesheet">
<script src="../lib/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectMirror: true,
select: function(arg) {
var title = prompt('Event Title:');
if (title) {
calendar.addEvent({
title: title,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
}
calendar.unselect()
},
eventClick: function(arg) {
if (confirm('Are you sure you want to delete this event?')) {
arg.event.remove()
}
},
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2020-09-01'
},
{
title: 'Long Event',
start: '2020-09-07',
end: '2020-09-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2020-09-09T16:00:00'
}
]
});
calendar.render();});
</script>
</head>
<body class="">
<div id="calendar" class="fc fc-media-screen fc-direction-ltr fc-theme-standard"><div class="fc-header-toolbar fc-toolbar fc-toolbar-ltr"><div class="fc-toolbar-chunk"><div class="fc-button-group">
</body></html>
You need to query data using calendar.getEvents() and then save the file using e.g. How do I save JSON to local text file
Try to put more effort into reading the docs, FullCalendar has a very nice documentation.
I am using fullcalendar and my goal is to have a simple pop up on the event click but for some reason I cannot get it to pull in the description in the alert.
Am I missing some JS to include or something? I tried to use the examples from their site but it was not working. I am sure it is something stupid I am missing.
<script src='../assets/calendar/packages/core/main.js'></script>
<script src='../assets/calendar/packages/interaction/main.js'></script>
<script src='../assets/calendar/packages/daygrid/main.js'></script>
<script src='../assets/calendar/packages/timegrid/main.js'></script>
<script src='../assets/calendar/packages/list/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var d = new Date();
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
height: 'parent',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultView: 'dayGridMonth',
defaultDate: d,
eventClick: function(info) {
alert('Event: ' + info.description);
},
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
events:
[
{
title: 'All Day Event<br>second line',
description: 'description for Long Event',
start: '2020-05-01'
},
{
title: 'Session',
start: '2020-05-12T10:30:00',
description: 'description for Long Event',
end: '2020-05-12T12:30:00'
},
{
title: 'Practical',
start: '2020-05-27T10:30:00',
description: 'description for Long Event',
end: '2020-05-27T12:30:00'
}
]
});
calendar.render();
});
</script>
You need to write
alert('Event: ' + info.event.extendedProps.description);
because
1) the info object isn't the event, the event is a sub-property of that info object - this is described at https://fullcalendar.io/docs/eventClick
and
2) description is a non-standard field as far as fullCalendar is concerned, and all non-standard fields are placed inside the extendedProps sub-property of the event object which fullCalendar generates based on the data you provide it - this is described at https://fullcalendar.io/docs/event-parsing
I have created a scheduler with following events and resources
var sampleEvents = [{ 'id': '1',
'resourceid': '27',
'start': '2018-09-19T07:00:00',
'stop': '2018-09-19T16:00:00',
'title': 'Message 1',
}];
var sampleResources = [{
facility_type: "Message Type",
id: '27',
title: "Message 1"
}];
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
now: currenDate //Today's Date,
editable: false,
header: {
left: 'today prev,next',
center: 'title',
right: 'month,timelineDay,agendaWeek'
},
defaultView: 'month',
resourceGroupField: 'facility_type',
resourceColumns: [
{
labelText: 'Facility',
field: 'title',
width: 150,
},
],
resources: sampleEvents,
events: sampleResources,
dayClick: function(date, jsEvent, view) {
if(view.name == 'month' || view.name == 'basicWeek') {
$('#calendar').fullCalendar('changeView', 'timelineDay');
$('#calendar').fullCalendar('gotoDate', date);
}
},
});
}, function (error) {
});
The events are showing in month view, but they are not shown in day view. Can someone tell me where the problem is?
In JavaScript, variable and property names are case-sensitive. Therefore
'resourceid': '27'`
should be
'resourceId': '27'
as per the example in the documentation. The event isn't showing the timeline view because as far as fullCalendar is concerned you didn't tell it which resource to associate it with.
Assigned objects are improper. If you pass the correct objects. It will work fine
resources: sampleResources,
events: sampleEvents
You can refer below working jsfiddle link
http://jsfiddle.net/jso51pm6/3769/
resources: sampleEvents,
events: sampleResources,
You filled them wrong. Switch them. It will work.
resources: sampleResources,
events: sampleEvents,
Im new to javascript and I have this code where I should pass or convert to jQuery. I have tried some code but it doesn't work. How can I do it properly?
Here is what it should look like:
<script>
$('#calendar').fullCalendar({
defaultDate: '2017-10-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Juan Dela Cruz',
start: '2017-10-01T10:30:00',
},
{
title: 'Juan Dela Cruz',
start: '2017-10-12T10:30:00',
},
{
title: 'Juan Dela Cruz',
start: '2017-10-27T12:00:00'
}
]
});
and here is what I have tried:
<script>
var x = [];
#foreach(var item in Model)
{
#:x.push(title='#Html.DisplayFor(x=>item.Patient.LastName)', start='#Html.DisplayFor(x=>item.ScheduleDate)')
}
$('#calendar').fullCalendar({
defaultDate: '2017-10-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: x
});
You're iterating correct the Model using #foreach statement.
The problem is at this line:
#:x.push(title='#Html.DisplayFor(x=>item.Patient.LastName)', start='#Html.DisplayFor(x=>item.ScheduleDate)')
You have to push an object in following way:
#:x.push({title:'#item.Patient.LastName', start:'#item.ScheduleDate'});
The statement foreach in jQuery is $.each and this a simple sample to do that :
$.each( obj, function( key, value ) {
alert( key + ": " + value );
});
I want to get data from my server to populate a prop or data in vuejs.
Basically I need to pass the data as a parameter of my component.
data() {
return {
recursos_data : [
{ id: 'a', title: 'Room A' },
{ id: 'b', title: 'Room B', eventColor: 'green' },
{ id: 'c', title: 'Room C', eventColor: 'orange' },
{ id: 'd', title: 'Room D', eventColor: 'red' }
],
meus_recursos: []
}
},
methods: {
getResources: function() {
var self = this;
Vue.http.get('/admin/getResources').then((response) => {
_.forEach(response.data.resources,function(item){
self.meus_recursos.push(item);
});
console.log(self.meus_recursos);
return self.meus_recursos;
});
},
},
mounted() {
const cal = $(this.$el),
self = this;
self.getResources();
cal.fullCalendar({
header: this.header,
defaultView: this.defaultView,
editable: this.editable,
selectable: this.selectable,
selectHelper: this.selectHelper,
aspectRatio: 2,
slotDuration: '00:10:00',
timeFormat: 'HH:mm',
eventSources: self.eventSources,
events: self.events,
resources: self.recursos_data,
fixedWeekCount: false,
firstDay: 1
});
}
I need to get the data from the url but I don't know how to make it work.
I've tried computed, props, and method, but they don't work...
I need to get the data from the value returned from my server instead of from the variable recursos_data. How can one achieve this in vuejs?
I expect your issue is some interaction between fullCalendar and your asynchronous method. You want to initialize fullCalendar after your data is returned.
How about returning the promise from your getResources method?
methods: {
getResources: function() {
var self = this;
return Vue.http.get('/admin/getResources').then((response) => {
_.forEach(response.data.resources,function(item){
self.meus_recursos.push(item);
});
});
},
},
mounted() {
const cal = $(this.$el),
self = this;
self.getResources().then(() => {
cal.fullCalendar({
header: this.header,
defaultView: this.defaultView,
editable: this.editable,
selectable: this.selectable,
selectHelper: this.selectHelper,
aspectRatio: 2,
slotDuration: '00:10:00',
timeFormat: 'HH:mm',
eventSources: self.eventSources,
events: self.events,
resources: self.meus_recursos,
fixedWeekCount: false,
firstDay: 1
});
});
}
Or, you could call fullCalendar right afterwards in getResources.
getResources: function() {
var self = this;
return Vue.http.get('/admin/getResources')
.then((response) => {
_.forEach(response.data.resources,function(item){
self.meus_recursos.push(item);
})
.then(() => {
$(this.$el).fullCalendar({
header: this.header,
defaultView: this.defaultView,
editable: this.editable,
selectable: this.selectable,
selectHelper: this.selectHelper,
aspectRatio: 2,
slotDuration: '00:10:00',
timeFormat: 'HH:mm',
eventSources: self.eventSources,
events: self.events,
resources: self.meus_recursos,
fixedWeekCount: false,
firstDay: 1
});
})
});
}
Alternatively you could not even mount the component until you retrieve the data.
The answer is: you can't.
You need to switch your mindset. Every component is reactive and should display itself accordingly to it's model. You can't "stop" the component while downloading your data from the server. I see 2 solutions in your this situation:
Handle "data not ready" state by displaying some throbber or just empty list. It doesn't matter if you are changing data internaly or changing props from the parent component. You can add a flag like dataReady to data and set it to true after your ajax has finished. In your template you will have some if statement using this flag to display the throbber or data.
Control it from its parent component and display the component one only after the data is ready.
No other ways.