Updated Error Imagei am trying to pass database data from controller to calendar.js 's java script defines. But i am getting that errors while i am trying to do that. Can anybody help me about get rid of the syntax errors.
$(window).load(function() {
var date = new Date(),
d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear(),
started,
categoryClass;
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
$('#fc_create').click();
started = start;
ended = end;
$(".antosubmit").on("click", function() {
var title = $("#title").val();
if (end) {
ended = end;
}
categoryClass = $("#event_type").val();
if (title) {
calendar.fullCalendar('renderEvent', {
title: title,
start: started,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
$('#title').val('');
calendar.fullCalendar('unselect');
$('.antoclose').click();
return false;
});
},
eventClick: function(calEvent, jsEvent, view) {
$('#fc_edit').click();
$('#title2').val(calEvent.title);
categoryClass = $("#event_type").val();
$(".antosubmit2").on("click", function() {
calEvent.title = $("#title2").val();
calendar.fullCalendar('updateEvent', calEvent);
$('.antoclose2').click();
});
calendar.fullCalendar('unselect');
},
editable: true,
var events = [];
#foreach(var place in Model) {
< text >
var takvim = {
title: '#place.Ekip_id',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
};
events.push(takvim);
< /text>
};
});
});
Related
I have used this code but it is not working to disable dates with out event,here in this code there will be dates which will be available but some dates blank which is clickable, if i click on it is showing one popup i have created but color is turning into green which is not required please check it
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek'
},
views: {
month: {
titleFormat: 'YYYY, MM, DD'
}
},
validRange: function(nowDate) {
return {
start: nowDate,
end: nowDate.clone().add(2, 'months')
};
},
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
startDate = moment(new Date(start)).format("MM-DD-YYYY");
endDate = moment(new Date(end)).format("MM-DD-YYYY");
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}]);
$("#calendar").fullCalendar("unselect");
},
selectOverlap: function(event) {
return !event.block;
},
dayRender: function(date, cell) {
if (!IsDateHasEvent(date)) {
$(cell).addClass('fc-disabled-day disabled');
}
},
editable: true,
eventLimit: true,
events: function(start, end, timezone, callback) {
$.ajax({
url: '/my-url',
dataType: 'json',
data: {
tutor_id: $('#tutor_id').val()
},
success: function(response) {
var events = [];
for (var i = 0; i < response.length; i++) {
var start = response[i]['tutor_start_date'] + ' ' + response[i]['tutor_start_time'];
var end = response[i]['tutor_start_date'] + ' ' + response[i]['tutor_end_time'];
events.push({
start: start,
end: end,
color: '#8ec165',
tutor_id: response[i]['tutor_id'],
id: response[i]['id'],
textColor: 'white'
});
}
callback(events);
}
});
},
eventClick: function(event, jsEvent, view) {
startDate = moment(new Date(event.start)).format("YYYY-MM-DD hh:mm:ss");
endDate = moment(new Date(event.end)).format("YYYY-MM-DD hh:mm:ss");
var startEndDate = startDate + ',' + endDate;
slected_date_arr.push(startEndDate);
var myJsonString = JSON.stringify(slected_date_arr);
$('#selected_date_times').val(myJsonString);
},
dayClick: function(date, allDay, jsEvent, view) {
if (!IsDateHasEvent(date)) {
selectedDate = date;
// $("#divAddNewAppointment").dialog("open");
alert('This date is not available for selection');
return false;
} else {
// $('<%= "#" + lblMessage.ClientID%>').html(" your error msg");
// $("#divMessage").dialog("open");
console.log('there is event');
return true;
}
},
loading: function(bool) {
$('#loading').toggle(bool);
},
eventRender: function(event, element) {
element.qtip({
content: '<b> Time -' + event.start.format('hh:mma') + ' - ' + event.end.format('hh:mma') + '</b>',
});
},
eventAfterAllRender: function(view) {
$(".fc-time-grid-event").on('click', function(e) {
e.preventDefault();
$(this).css('background-color', '#B7A6EE');
$(this).css('border-color', '#B7A6EE');
$(this).removeClass("fc-time-grid-event").addClass("selected-event");
var quantity = $('.selected-event').length;
$("#quantity").val(quantity);
var totalQuantity = $("#quantity").val();
var tutorAmount = {
{
$tutor_price
}
};
var totalAmount = totalQuantity * tutorAmount;
$("#payable_amount").html(totalAmount);
$("#coursePrice").val(totalAmount);
});
$(".fc-day-grid-event").on('click', function(e) {
e.preventDefault();
$(this).css('background-color', '#B7A6EE');
$(this).css('border-color', '#B7A6EE');
$(this).removeClass("fc-day-grid-event").addClass("selected-event");
var quantity = $('.selected-event').length;
$("#quantity").val(quantity);
var totalQuantity = $("#quantity").val();
var tutorAmount = {
{
$tutor_price
}
};
var totalAmount = totalQuantity * tutorAmount;
$("#payable_amount").html(totalAmount);
$("#coursePrice").val(totalAmount);
});
},
});
Definition for IsDateHasEvent()
function IsDateHasEvent(date) {
var allEvents = [];
allEvents = $('#calendar').fullCalendar('clientEvents');
var event = $.grep(allEvents, function (v) {
return +v.start === +date;
});
return event.length > 0;
}
This calendar is displaying to students, so I want them to select only available slots.
i´ve got another question to fullcalendar.
I´want to allow the stuff to save events only to a fix month. The other months should be readonly. Is there a way to realize this?
This is my code:
$j('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2017-05-12',
selectable: true,
selectOverlap: false,
weekends: false,
eventOverlap: false,
select: function(start, end) {
var title = prompt('Kostenstelle:');
var eventData;
id = Date.now();
if (title) {
eventData = {
id: id,
title: title,
start: start,
end: end
};
$j('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
saveDay({'id': id,'title': title, 'start': start, 'end': end});
$j('#calendar').fullCalendar('unselect');
},
eventResize: function (event, dayDelta, minuteDelta) {
saveRange(event);
},
eventDrop: function (event, delta, revertFunc, jsEvent, ui, view ){
saveDrop(event, view);
},
eventReceive: function (event, dayDelta, minuteDelta){
saveDay(event);
},
eventRender: function(event, element) {
if(event.className != 'disableDelete'){ element.append( "<span class='closeon'>x</span>" );}
element.find(".closeon").click(function() {
$j('#calendar').fullCalendar('removeEvents',event._id);
deleteDay(event);
});
},
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($j('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$j(this).remove();
}
},
editable: true
});
The user should be able to view the other months but not be able to set events on it. So i want to set the other days readonly. Is it possible?
Thanks!
You can do this as follows
var monthStartDate = new Date('1/1/2017');
var monthEndDate = new Date('1/31/2017');
// monthStartDate and monthEndDate is month range in which you want to save event
select: function(start, end) {
if(start >= monthStartDate && start <= monthEndDate && end >= monthStartDate && end <= monthEndDate) {
var title = prompt('Kostenstelle:');
var eventData;
id = Date.now();
if (title) {
eventData = {
id: id,
title: title,
start: start,
end: end
};
$j('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
saveDay({'id': id,'title': title, 'start': start, 'end': end});
$j('#calendar').fullCalendar('unselect');
}
},
This will not allow to save events between monthStartDate and monthEndDate.
I'm using fullcalendar in an app with phonegap.
I have two external buttons which change the view (month or week), and the default view is Month.
nova.touch.bindClick("#btn_week", function() {
$('#calendar').fullCalendar('changeView', 'basicWeek');
$('#calendar').fullCalendar( 'render' );
});
nova.touch.bindClick("#btn_month", function() {
//$('#calendar_week').hide();
$('#calendar').fullCalendar('changeView', 'month');
$('#calendar').fullCalendar('render');
});
I have the events and event click:
$('#calendar').fullCalendar({
theme: false,
defaultView: 'month',
columnFormat: 'ddd',
firstDay: 1,
editable: true,
height: $('#calendar_content').height(),
header: {
right: 'today',
left: 'title'
//center: 'month,basicWeek'
},
events: [
{
title: 'N',
start: new Date(y, m, d-8)
},
{
title: 'L',
start: new Date(y, m, d+1)
},
{
title: 'L2',
start: new Date(y, m, d-15)
}
],
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);
$('#calendar').fullCalendar('updateEvent', calEvent);
}
For the first time the event click works well. I click in the event and I see the alert. But when I change the view with the external buttons, If I touch/click in the event, the alert doesn't show.
The fullcalendar version is: fullcalendar-2.3.2
Phonegap does not works well with events in fullcalendar. I found a solution.
I have created a function that creates the calendar with differents parameters (date, type of view) and put in this function the touch events (if put outside of this function, the events do not work), and when I change the date in the calendar or the view with an external button, I destroy the calendar and create again with the new date and view.
This is the code for the function to create calendar:
openCalendar: function(view, date_open, data){
var me = this;
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
theme: false,
defaultView: view,
columnFormat: 'ddd',
defaultDate: date_open,
firstDay: 1,
editable: true,
height: $('#calendar_content').height(),
header: {
right: 'today',
left: 'title'
//center: 'month,basicWeek'
},
events: [
{
title: 'E',
start: new Date(y, m, 1)
},
{
title: 'N',
start: new Date(y, m, d-5)
},
{
title: 'L',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
title: 'R',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'NS',
start: new Date(y, m, d-7)
},
{
title: 'N',
start: new Date(y, m, d-8),
imagen: 'yes'
},
{
title: 'L',
start: new Date(y, m, d+1)
},
{
title: 'L2',
start: new Date(y, m, d-15)
}
]
});
nova.touch.bindClick(".fc-event-container",function(){
me.firstDialog(); //open dialog
});
$('.fc-day').on( 'touchstart', function ( startEvent ) {
me.firstDialog();
});
},
In the initial call I do it like this:
var date = new Date();
me.openCalendar('month', date);
If I change something:
nova.touch.bindClick("#btn_week", function() {
var current_date = $('#calendar').fullCalendar('getDate');
$('#calendar').fullCalendar('destroy');
me.openCalendar('basicWeek', current_date);
});
nova.touch.bindClick("#btn_month", function() {
var current_date = $('#calendar').fullCalendar('getDate');
$('#calendar').fullCalendar('destroy');
me.openCalendar('month', current_date);
});
And when I touch in an event, the dialog or alert is opened correctly.
I'm not familiar with phonegap but I can guess what's going on here.
nova.touch.bindClick("#btn_week"... is binding to an element and becoming useless when the calendar is rerendered since the element no longer exists.
Solution 1
Use a delegated event listener. I do not know if this exists within phonegap.
Solution 2
Rebind it every render within eventAfterAllRender. Something along the lines of
eventAfterAllRender: function(){
nova.touch.bindClick("#btn_week", function() {
$('#calendar').fullCalendar('changeView', 'basicWeek');
$('#calendar').fullCalendar( 'render' );
});
nova.touch.bindClick("#btn_month", function() {
//$('#calendar_week').hide();
$('#calendar').fullCalendar('changeView', 'month');
$('#calendar').fullCalendar('render');
});
},
Need a help with fullcalendar.js. I found a error "Undefined is not a function" when I see on web inspector. But I think the code is fine.
You can check this fiddle https://jsfiddle.net/3kq85hx0/ for detail.
$(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: 'resourceDay,resourceWeek,resourceNextWeeks,resourceMonth'
},
defaultView: 'resourceWeek',
firstDay: 1,
editable: true,
selectable: true,
minTime: 8,
snapMinutes:10,
weekNumbers: false,
weekNumberTitle: 'Viikko ',
refetchResources: true,
maxTime:16,
selectHelper: true,
resources: 'json-resources.php',
events: [
{
title: 'Meeting from this day to this +4',
start: new Date(y, m, d, 10, 30),
end: new Date(y, m, d+4, 11, 00),
resource: 'resource1'
},
{
title: 'Meeting last week',
start: new Date(y, m, d-7, 10, 30),
end: new Date(y, m, d-7, 12, 15),
resource: 'resource1'
},
{
title: 'meeting tomorrow',
start: new Date(y, m, d+1, 10, 30),
end: new Date(y, m, d+1, 12, 00),
resource: 'resource1'
}
],
select: function(start, end, allDay, jsEvent, view, resource) {
var title = prompt('event title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay,
resource: resource.id
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
resourceRender: function(resource, element, view) {
// this is triggered when the resource is rendered, just like eventRender
},
eventDrop: function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) {
alert('event moved to '+event.start+' to '+event.resource);
},
eventResize: function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) {
alert('event was resized, new endtime: '+event.end);
},
eventClick: function ( event, jsEvent, view ) {
alert('event '+event.title+' was left clicked');
}
});
});
Thanks.
The "undefined is not a function" is coming from within the custom fullcalendar script. Specifically on line 6373:eventElement.draggable({.
This is because draggable was not defined. draggable is part of jqueryui, so I removed your jquery ui script and added one from google's cdn.
The fiddle works correctly now.
Also, as discussed in the comments, you are on an old version of fullcalendar. And this particular custom build has a bunch of issues.
First, I don't know how long term your plans are but Adam Shaw is currently working on an official timeline update to fullcalendar. You might want to watch for this.
Until then, there is this fork that is mostly up to date. You can read about it here. I don't know if it meets your needs but you might want to take a look.
I am building a event calendar within Hero Framework. I have got my fullcalendar linked to DB via JSON method. The record is showing start at "2012-04-18 12:00" and end at "2012-04-18 14:00" but calendar failed to show the event base on the time. It is shown as ALL-DAY event. Any idea how to solve that?
<script type='text/javascript'>
$(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',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
allDaySlot: false,
firstHour: 9,
select: function(start, end) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end
},
false // make the event "stick"
);
var startDateString = $.fullCalendar.formatDate(start, 'yyyy-MM-dd hh:mm');
var endDateString = $.fullCalendar.formatDate(end, 'yyyy-MM-dd hh:mm');
$.ajax({
type: 'POST',
url: '{url}ajaxpost/add',
data: {
startDate: startDateString,
endDate: endDateString,
eventTitle: title
},
dateType: 'json',
success: function (resp) {
calendar.fullCalendar('refetchEvents');
}
});
}
calendar.fullCalendar('unselect');
},
editable: true,
events: "{url}ajaxget/data",
});
});
you need to set the event allDay property to false
When you return the events from your {url}ajaxget/data url, you need to specify that the event is not all day.
You do this my setting an allDay field on each event that is not all day long.
It may look like this:
[{
start : 10000000,
end : 10000500,
title : 'example event'
allDay : false
}, ... ]
You can also find this info in the documentation.