How to get the value of allDay in fullcalendar jquery plugin? - javascript

I'm using the fullcalendar jquery plugin and I want to get the value of allDay that is true or false and I want to append the value to a form.But value that is getting appended is [object Object]
<input type="hidden" id="apptAllDay" value="[object Object]">
<script type="text/javascript">
$(document).ready(function(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
$('#apptStartTime').val(start);
$('#apptEndTime').val(end);
$('#apptAllDay').val(allDay);
$.magnificPopup.open({
items: {
src: '#popup',
type: 'inline'
}
});
},
editable: true,
eventLimit: true, // allow "more" link when too many events
eventStartEditable : false,
events: "http://localhost/app1/events",
});
$(document).on("click","#addEvent",function(e) {
e.preventDefault();
doSubmit();
});
function doSubmit(){
var title = $("#titleContainer").val();
var description = $.trim($("#descContainer").val());
var url = $("#urlContainer").val();
if (!title) {
alert("Title is required");
return false;
}
$("#calendar").fullCalendar('renderEvent',
{
title: title,
start: new Date($('#apptStartTime').val()),
end: new Date($('#apptEndTime').val()),
allDay: ($('#apptAllDay').val() == "true")
},
true);
}
});
How can I get the real value that is TRUE or FAlSE?

This might probably help you, change according to your requirement.
function parseClientEvents(){
var clientArr = $('#calendar').fullCalendar('clientEvents');
for(i in clientArr){
console.log(clientArr[i]);//gives events full description.
console.log(clientArr[i].allDay);
//check for value here and append to your hidden field.
//all your logic goes here.
}
return true;
}

Related

In fullcalendar error adding button to event

In my laravel-fullcalendar app I want to add some buttons with jsvascript function to events
and looking at this Add font awesome icon to full calendar title
example with decision I make it as :
window.calendarEventsObject = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid'],
eventRender: function (eventInfo, element) {
console.log("eventRender eventInfo::")
console.log(eventInfo)
console.log("eventRender eventInfo.event::")
console.log(eventInfo.event)
console.log("element::")
console.log( element )
console.log("eventInfo.el::")
console.log( eventInfo.el )
eventInfo.event.el.find(".fc-title").prepend("<i class='fa fa-external-link'></i>");
var tooltip = new Tooltip(eventInfo.el, { // example : https://fullcalendar.io/docs/event-tooltip-demo
title: 'HTREDSA', //eventInfo.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
events: eventsList,
header: {
left: 'LEFT98',
center: 'title123',
right: 'Right 444'
},
showNonCurrentDates: false,
editable: true,
allDaySlot: true,
selectable: true,
selectHelper: true,
selectOverlap: false,
fixedWeekCount: false,
aspectRatio: 0.4,
height: 700,
select: function (start, end) {
alert( "select:::"+var_dump(-50) )
var title = "Available";
var evid = SaveEvent(start, end, '1');
$('#events_calendar').fullCalendar('unselect');
},
eventClick: function (clickObj) {
alert( "eventClick clickObj.el::"+var_dump(clickObj.el) )
if (clickObj.el.href != "") {
// alert( "::"+var_dump(-4) )
let el_href = clickObj.el.href
clickObj.el.href = ""
window.open(el_href, "_blank");
// clickObj.event.preventDefault();
alert( "::"+var_dump(-41) )
return false;
}
return false;
},
});
But debugging in console I see that the second parameter of eventRender function element is empty in my case.
I tried to get access to elemnt eventInfo by 1st parameter, but Failed: https://imgur.com/a/GPn1tOe
How to add button to fullcalendar event ?
"laravel/framework": "5.8.*",
"maddhatter/laravel-fullcalendar": "^1.3",
Thanks!
I found a decision for fullcalendar 4 without jquery methods :
eventRender: function (eventInfo) {
eventInfo.el.querySelector('.fc-title').append("Some additive Text ");
It works!

Limit the number of events created per day in fullcalendar

I am working with fullcalendar. I want to limit the number of events created per day to 4 in week's view.
I have seen this link but it is not of much help
stackoverflow question
eventLimit options only limits the events displayed but I want to stop creating events once 6 events have been created per day in week's view.
Try this.
select: function( start, end, jsEvent, view) {
var eventCounter = 0;
$('#calendar').fullCalendar('clientEvents', function(event) {
if (start.format('YYYY-MM-DD') == event.start.format('YYYY-MM-DD')) {
eventCounter++;
}
});
if (eventCounter < 6) {
// Code to create event
}
}
This works for me locally.
Okay after digging deep and learning more about fullcalender, here is how i did it. it was very easy i must say. `
var event_count=0;// to count the number of events starting from zero
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-01-12',
editable: true,
selectable: true,
minTime: '09:00:00',
maxTime: '18:00:00',
columnFormat: 'dddd',
eventLimit: true,
select: function(start, end) {
var eventData = {
start: start,
end: end
};
event_count+=1;//if the control is inside this function increment eventcount
if(event_count<4){
//if the counter is less than four then do this
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
$('#calendar').fullCalendar('unselect');
}
},
eventClick: function(event){
$('#calendar').fullCalendar('removeEvents',event._id);
event_count-=event_count;//decrement event_count when event is removed
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
$('#view_calendar').on('shown.bs.modal', function () {
$("#calendar").fullCalendar('render');
});
})
`

Add event to every day if the day is empty

To better understand my question, take a look at the JSFiddle Example.
Basically there are tree kinds of unique items on the calendar that are all day events: Today, Completed, and Incomplete days. I need to figure a way to populate days that don't have anything on them (Today, or Incomplete), in this case they would be populated with "Completed". How can I figure out what these days are?
Also any way to limit the calendar to a set months range? For instance Quarter 1 would be Dec 1st to Mar 31st.
//Calendar
$(document).ready(function() {
// Figure out todays date and provide link to enter data
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// Staff Data Calendar
$('#calendar-staff').fullCalendar({
header: {
left: '',
center: 'title',
},
businessHours: true, // display business hours
handleWindowResize: true, // responsive layout
editable: false,
events: [
// red areas where no events can be dropped
{
title: 'No Data',
start: '2015-02-03',
url: '#',
color: '#E64C65'
},
{
title: 'No Data',
start: '2015-02-17',
url: '#',
color: '#E64C65'
},
{
// Display Today
title: 'Enter Data for Today',
url: 'staffing_data_edit.html',
color: '#5E9EF3',
start: new Date(y, m, d)
}
]
});
});
You can use and apply a custom check on a event dayRender Click here for reference
Or you can use event eventAfterAllRender which call after the calendar is ready to draw. you can use a loop and check the empty days.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2018-10-25',
navLinks: true, // can click day/week names to navigate views
selectable: false,
selectHelper: true,
select: function(start, end) {
},
dayRender: function(date, cell )
{
console.log(date);
console.log(cell);
},
eventRender: function(event, element, view) {
},
eventAfterAllRender: function(view)
{
if (view.name == "month") {
var allEvents = $('#calendar').fullCalendar('clientEvents');
for (var index in allEvents) {
var event = allEvents[index];
}
}
},
eventClick: function(event) {
return false;
},
loading: function(bool) {
//$('#loading').toggle(bool);
},
timezone: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
eventLimitTex: 'More shifts',
events: eventsJson
});

Fullcalendar v2 store dragged event into localstorage

How can I store my dragged events into localstorage ? I have figured out in old fullcalendar version but this solution is not working any more.
var EventsView = Backbone.View.extend({
el: document.getElementById("content"),
render: function() {
var self = this;
var events = JSON.parse(localStorage.getItem('events'));
var events = new Events(events);
var jsevents = events.toJSON();
this.el.innerHTML = _.template( calendarTemplate,{data : jsevents} );
$('#calendar').fullCalendar({
agenda: 'h:mm{ - h:mm}',
'': 'h(:mm)t',
aspectRatio: 1.5,
droppable: true,
weekend: true,
editable: true,
eventDrop: function(event) {
// ???????????????????????????????
},
defaultView: 'month',
firstDay: 1,
handleWindowResize: true,
allDayDefault: false,
firstHour: 7,
columnFormat: {
month: 'dddd',
week: 'ddd, dS',
day: 'dddd, MMM dS'
},
header: {
right: 'prev,next',
center: 'title',
left: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
events.push(eventData);
localStorage.setItem('events',JSON.stringify(events));
}
$('#calendar').fullCalendar('unselect');
},
events: function(start, end, timezone, callback) {
callback(jsevents);
}
});
},
You can see my select function fully working. I mean selected events are stored into database.
i was able to replicate your example, and it worked just fine, the only thing i added is the definition of Events, i made it as backbone collection
var Events = Backbone.Collection.extend({});
I think you need to debug while setting the value in local storage, try to log the value of
JSON.stringify(events)
just before setting in local storage
EDIT:
jsfiddle: http://jsfiddle.net/mfarouk/vcsr45q8/25/

connect to database data in fullcalendar

I've see the calendar code on arshaw/fullcalendar. And I've changed a little code, but I still don't know how to connect javascript into database..
Here's the original code
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
});
});
And this I changed a bit
$(document).ready(function()
{
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
newwindow=window.open('2.php','name','height=400,width=300');
if (window.focus) {newwindow.focus()}
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
});
});
Where can I put the connection script ?
Need advise..
Thanks,
You cannot establish a connection directly from javascript to use in full calendar
You have to do this
Create a Servlet/Action Class/ C# Class (whatever we based Controller class);
Connect to database from the Controller
Write the response data as a JSON String
IN the full calendar, add this attribute
events: "servletURL",
When the calendar loads, the events attribute will call the servletURL, using ajax and retrieve the response text to display it in the Calendar

Categories