Develop Reference

JQueryFullCalendar using MVC

I am using MVC. I got the events from database and using jQuery to bind the data.
My event date from database is appearing as '2021-01-14 00:00:00.000'
Below is my code:
function fnGetHolidays() {
$.ajax({
url: siteRoot + "/Master/GetHolidays",
data: {
},
success: function (data) {
fnBindHolidayCalendar(JSON.parse(data.Holidays));
},
error: function (e) {
console.log(e);
},
complete: function (e) {
}
})
}
function fnBindHolidayCalendar(holiday) {
var initialLocaleCode = 'en';
if (culture == "ar-SY") {
initialLocaleCode = 'ar-sa';
}
var calendarEl = document.getElementById('dvHolidayCalendar');
var calendar = new FullCalendar.Calendar(calendarEl,{
header:
{
left: 'prev,next today',
center: 'title',
right: ''
},
locale: initialLocaleCode,
displayEventTime: false,
eventRender: function (event, element) {
element.qtip(
{
content: event.description
});
},
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) {
fnEditHoliday(arg);
},
editable: false
});
var events = [];
$.each(holiday, function (i, data) {
var HolidayDate = data.HM_Date
events.push(
{
allDay: true,
id: data.HM_ID,
title: data.HM_Title,
description: data.HM_Title,
start: changeDateFormat(HolidayDate, 'dd/MM/yyyy', 'yyyy-MM-dd'),
end: changeDateFormat(HolidayDate, 'dd/MM/yyyy', 'yyyy-MM-dd'),
backgroundColor: "#006dff",
borderColor: "black"
});
});
calendar.addEventSource(events);
calendar.render();
}

How do I customise time slots in full calendar?

I am using full-calendar from fullcalendar.io and having some trouble customizing its time slot.
I want to add time slots like breakfast, lunch, dinner etc also user can add his/her own slots. How do I set the fixed height according to the number of slots? Also, I want to set the slot column text for breakfast, lunch etc. not 12 am, 6 am. Here's what I did until now:
var today = moment();
$('#calendar').fullCalendar({
droppable: true,
defaultView: 'Week',
header: false,
defaultDate: today,
navLinks: false, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
/*events: [
{
title : 'event1',
start : today,
imageurl:'assets/images/recipe/salad.jpg'
}
],*/
/*views: {
agendaWeek: {
agendaEventMinHeight: 150,
allDaySlot: false,
slotLabelInterval: { hours: 6},
slotDuration: { hours: 1},
duration: { days: 7}
}
},*/
eventRender: function (event, element) {
element.find(".fc-event-title").remove();
element.find(".fc-event-time").remove();
var new_description = '#';
element.append(new_description);
},
now: today,
/*header: {
left: 'promptResource',
center: '',
right: ''
},*/
footer: {
left: 'promptResource',
center: '',
right: ''
},
customButtons: {
promptResource: {
text: '+ add course',
click: function() {
var title = prompt('Course name');
if (title) {
$('#calendar').fullCalendar(
'addResource',
{ title: title },
true // scroll to the new resource?
);
}
}
}
},
views: {
Week: {
type: 'timeline',
duration: { Days: '7' },
slotLabelInterval: { hours: 24},
slotDuration: { hours: 24},
}
},
resourceLabelText: 'Meal',
resourceRender: function(resource, cellEls) {
cellEls.on('click', function() {
if (confirm('Are you sure you want to delete ' + resource.title + '?')) {
$('#calendar').fullCalendar('removeResource', resource);
}
});
},
resources: [
{ id: 'a', title: 'Breakfast' , eventColor: 'red'},
{ id: 'b', title: 'Lunch', eventColor: 'green' },
{ id: 'c', title: 'Dinner', eventColor: 'orange' },
{ id: 'd', title: 'Other', eventColor: 'grey'},
],
events: [
{ id: '1', resourceId: 'b', start: today, end: today, title: 'event 1' },
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
]
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" data-print="true" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.css" />
<div id="calendar"></div>
Any help would be really appreciated.
Edit:
Here's what I actually want to implement.
In design, you can see that the time of the day is not important. I want the users to add as many meals a day as they can. I just a want the option to add the meal's title(event). And remove the time slots on the left side.
update:
I've managed to solve this problem to some extent. Here's how it looks now:
But still, there are some problems like how can I change the date format in columnHeader and how can I give fix size to row and columns?

Highlight day cell as per given date

I need to highlight a specific day from the fullcalendar using JavaScript/jQuery. The date should be given by user input. I have provided my code below:
<style type="text/css">
.cellBg {
background: #000;
color: #fff;
}
</style>
$(document).ready(function() {
var today=new Date().toISOString().substring(0, 10);
var highligtDate="2017-12-05";
console.log('today',today);
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay,today,listMonth'
},
dayRender:function(date,cell){
date = new Date();
date = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
$('.fc-day[data-date="'+ date +'"]').addClass('cellBg');
},
///////// edit
dayClick: function (date, jsEvent, view) {
//alert('day click');
},
eventClick:
function (event, jsEvent) {
//alert('event clicked');
$('#eventpopup').modal({
backdrop: 'static'
});
},
///////////
defaultDate: today,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-05-01'
},
{
title: 'Long Event',
start: '2017-05-07',
end: '2017-05-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-16T16:00:00'
},
{
title: 'Conference',
start: '2017-05-11',
end: '2017-05-13'
},
{
title: 'Meeting',
start: '2017-05-12T10:30:00',
end: '2017-05-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-05-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-05-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-05-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-05-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-05-13T07:00:00'
},
{
title: 'Click for Google',
//url: 'http://google.com/',
start: '2017-05-28'
}
]
});
});
Here I have one date var highligtDate="2017-12-05" and I need to highlight this day cell from the calendar.

Compare the date with highligtDate and assign 'cellBg' class to it.There you do not have a condition to assign this class to particular date.
$(document).ready(function() {
var today=new Date().toISOString().substring(0, 10);
var highligtDate="2017-12-05";
console.log('today',today);
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay,today,listMonth'
},
dayRender:function(date,cell){
//date = new Date();
//date = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
//Compare the date with highligtDate and assign 'cellBg' class to it.
if(date.format('YYYY-MM-DD') == highligtDate)
{
$('.fc-day[data-date="'+ highligtDate +'"]').addClass('cellBg');
}
},
///////// edit
dayClick: function (date, jsEvent, view) {
//alert('day click');
},
eventClick:
function (event, jsEvent) {
//alert('event clicked');
$('#eventpopup').modal({
backdrop: 'static'
});
},
///////////
defaultDate: today,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-05-01'
},
{
title: 'Long Event',
start: '2017-05-07',
end: '2017-05-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-16T16:00:00'
},
{
title: 'Conference',
start: '2017-05-11',
end: '2017-05-13'
},
{
title: 'Meeting',
start: '2017-05-12T10:30:00',
end: '2017-05-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-05-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-05-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-05-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-05-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-05-13T07:00:00'
},
{
title: 'Click for Google',
//url: 'http://google.com/',
start: '2017-05-28'
}
]
});
});

calendar adding of event using fullcalendar

DEMO
I am doing the fullcalendar and i was able to create it properly the demo above is exactly like what i have done so far. I wanted to add new function on the calendar on the demo if you add event and refresh the page the added event is gone. I wanted to save the event into the database so that if you refresh it it will still be there and also i can delete old events.
The default events are added like
$('#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) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-02-01'
},
{
title: 'Long Event',
start: '2015-02-07',
end: '2015-02-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-16T16:00:00'
},
{
title: 'Conference',
start: '2015-02-11',
end: '2015-02-13'
},
{
title: 'Meeting',
start: '2015-02-12T10:30:00',
end: '2015-02-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-02-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-02-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-02-12T17:30:00'
},
{
title: 'Dinner',
start: '2015-02-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2015-02-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-02-28'
}
]
});
});
I want to be able to capture the data in the alert box when a date is clicked but i cant find where it is located.
I need to capture the text from that alert box so that i can store it in database after clicking ok.
Im still trying to read the documentation to find where i can get the text and store it in database
The Documentation is found here

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); // stick? = true
}
$('#calendar').fullCalendar('unselect');
}
This is the part where the text is being get the variable title is the data from the alert which will be the title of the event.

How to generate string using for loop in JQuery in ASP.net?

I have to generate a string in Jquery by looping the List as follows
events: [
{
title: 'All Day Event',
start: '2014-11-01'
},
{
title: 'Long Event',
start: '2014-11-07',
end: '2014-11-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2014-11-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2014-11-16T16:00:00'
},
{
title: 'Conference',
start: '2014-11-11',
end: '2014-11-13'
},
{
title: 'Meeting',
start: '2014-11-12T10:30:00',
end: '2014-11-12T12:30:00'
},
{
title: 'Lunch',
start: '2014-11-12T12:00:00'
},
{
title: 'Meeting',
start: '2014-11-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2014-11-12T17:30:00'
}
]
The list contain these elements but I'm unable to generate this kind of string .I've tried in two ways
for(var i=0; i<customers.length; i++)
{
"{"
"title:" +customers[i].Column1+","
"start:"+customers[i].Column3
"}"
if(i!=customers.length-1)
{
","
}
}
and
$.each(eventList, function (index, employee) {
{
title:employee.name,
start:employee.date
}
,
});
but I'm unable to get proper result please give me solution for this .To get list I'm using the following coe
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'ProjectedYieldCalender.aspx/GetData',
data: '{}',
success:
function (data) {
var eventList = data.d
eventList=demo(eventList);
initCalendar(eventList);
}
});
});
function initCalendar(eventList) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
//defaultDate: '2014-08-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
eventList
]
});
}
Thank you

Do you want all the events to be on a single event. Then this may help.
var string;
$.each(events, function() {
string += "{title:" + this.title + "start:" + this.start + "}" ;
});