Add events in FullCalendar on click - javascript

I am trying to add events on calendar cell click in .NET like this:
http://arshaw.com/js/fullcalendar-1.5.3/demos/selectable.html
I took the help of this post:
create event with fullcalendar when clicking on calendar (rails)
I am getting the Selected date and text on Alert , bit not able to post it on selected cell ..
I have tried same solution on jsfiddle:
http://jsfiddle.net/5o66w860/
My code:
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var events_array = [
{
title: 'Test1',
start: new Date(2012, 8, 20),
tip: 'Personal tip 1'},
{
title: 'Test2',
start: new Date(2012, 8, 21),
tip: 'Personal tip 2'}
];
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
events: events_array,
eventRender: function(event, element) {
element.attr('title', event.tip);
},
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"
);
/**
* ajax call to store event in DB
*/
jQuery.post(
"event/new" // your url
, { // re-use event's data
title: title,
start: start,
end: end,
allDay: allDay
}
);
}
calendar.fullCalendar('unselect');
}
});
});
I also to remove , events array . .. but still not working

Ok , got It after some googling :
Just need to change Code on select
select: function (start, end, jsEvent, view) {
var abc = prompt('Enter Title');
var allDay = !start.hasTime && !end.hasTime;
var newEvent = new Object();
newEvent.title = abc;
newEvent.start = moment(start).format();
newEvent.allDay = false;
$('#calendar').fullCalendar('renderEvent', newEvent);
}

Related

Full Calendar listDay error: spec.class is not a constructor

According to the fullCalendar documentation there are nine different views available. Five of these views have demos while the others do not. Becuase the monthly view is not responsive I am interested in having the view change into the dayList view when on mobile. The default view is currently month but when setting this to defaultView: listDay as a property of the plugin I get the following error:
spec.class is not a constructor
I am using version 2.7.2 with the correct style sheets from a CDN. I am most interested in having my calendar display similar to the calendar found at https://fullcalendar.io/docs/list_view/intro/
Here is what my code looks like to generate my calendar.
$('#calendar').fullCalendar({
defaultView: 'listDay',
eventColor: '#9ADCC6',
eventTextColor: '#000',
header: {
left: 'title',
center: '',
right: 'today prev, next',
},
displayEventEnd: true,
buttonIcons: {
prev: 'left-single-arrow',
},
eventClick: function(event, jsEvent, view){
$('.myModal3 .title').text(event.title);
$('.myModal3 .date').text(event.start.format('MMM Do YYYY # h:mm:ss a'));
$('.myModal3 .modal-body').text(event.desc);
$('.myModal3 .modal-body').append(" <a href='"+event.link+"' target='_blank'>Learn More</a>");
$('.myModal3').css('display','block');
$('.myModal3.fade').css('opacity', '1');
},
events: function(start, end, timezone, callback) {
$.ajax({
url: '/events-iu-rss/calendar.asp',
data: {
start: start.unix(),
end: end.unix()
},
success: function(doc) {
var events = [];
// e = key, a = value
$(doc).find('event').each(function(e, a) {
var time = $(a).find('start-date-time').text();
//Wed, 16 Sep 2015 10:00:00 EDT
var endTime = $(a).find('end-date-time').text();
var formatEndTime = moment(endTime).format();
var formatTime = moment(time).format();
//console.log(a);
//console.log(formatTime.substr(11));
//console.log(formatEndTime.substr(11));
html = $.parseHTML( $(a).find('description').text() );
//stripping out first 11 characters of formatTime and formatEndTime, comparing the two times, and setting allDay value based on result
if((formatTime.substr(11))==(formatEndTime.substr(11))){
events.push({
title: $(a).find('summary').text(),
link: $(a).find('event-url').text(),
start: formatTime,
end: formatEndTime,
allDay: true,
desc: $($.parseHTML( $(a).find('description').text() )).html()
});
}
else{
events.push({
title: $(a).find('summary').text(),
link: $(a).find('event-url').text(),
start: formatTime,
end: formatEndTime,
allDay: false,
desc: $($.parseHTML( $(a).find('description').text() )).html()
});
}
});
callback(events);
}
});
}
});

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
});

Full calender - Remove Events on day click and remove Bg-color of particular cell

I need to limit the events to one in a particular date, and on click of date if any events are present, it has to be removed.
While adding an event to a date, the color of the cell should be turned orange, and while deleting the event, it has to be turned back to white.
$(function () {
// Full calendar
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,
backgroundColor: 'orange',
allDay: allDay,
},
true
);
}
calendar.fullCalendar('unselect');
},
eventClick: function(event){
var r=confirm(\"Are you sure?\");
if (r==true)
{
$('#calendar').fullCalendar('removeEvents',event._id);
}
},
dayClick: function(date, allDay, jsEvent, view) {
if($( this ).hasClass('bg-orange')){
$(this).removeClass('bg-orange');
}
else
{
$(this).addClass('bg-orange');
}
},
editable: true,
events: [
]
});
});

Fullcalendar: How can get selected start and selected end datetime on fullcalendar through calendar object?

I have gone through other post of fullcalendar but i couldn't fine what i need.
In "Select" callback event under fullcalendar, i could get start,end datetime values which are selected by user. I want this values through calendar object as i need to use this in other function.
http://arshaw.com/fullcalendar/docs/selection/select_callback/
Can any one please share me , how to get start/end value through calendar object ?
$(document).ready(function () {
// Calendar
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'
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
var title = prompt('Event Title:'+start+' '+end);
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
//$('.fc-day-content').html('<div style="position: relative; height: 0px;">xxx</div>');
}
calendar.fullCalendar('unselect');
},
editable: true,
});
// Calendar end
});
SEE "start" and "end" in prompt

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