How can we make the following work so it will POST the events?
The events can be added to the calendar just fine, we just need to POST them to our API. Fiddle: https://jsfiddle.net/H_INGRAM/9oup1jfb/4/
This is my first time working with Ajax.
$(document).ready(function()
{
/*
date store today date.
d store today date.
m store current month.
y store current year.
*/
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'
},
defaultView: 'agendaWeek',
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,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
});
$(document).ready(function () {
$('#fullcal').fullCalendar({
eventClick: function() {
alert('a day has been clicked!');
},
events: function (start, end, callback) {
$.ajax({
type: "POST", //WebMethods will not allow GET
url: "/events-truett-volunteership.html", //url of a webmethod - example below
data: "{'userID':'" + $('#<%= hidUserID.ClientID %>').val() + "'}", //this is what I use to pass who's calendar it is
//completely take out 'data:' line if you don't want to pass to webmethod - Important to also change webmethod to not accept any parameters
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (doc) {
var events = []; //javascript event object created here
var obj = $.parseJSON(doc.d); //.net returns json wrapped in "d"
$(obj.event).each(function () { //yours is obj.calevent
events.push({
title: $(this).attr('title'), //your calevent object has identical parameters 'title', 'start', ect, so this will work
start: $(this).attr('start'), // will be parsed into DateTime object
end: $(this).attr('end'),
id: $(this).attr('id')
});
});
callback(events);
}
});
}
});
});
definitely you will have a submit handler or button click to sent data, so inside, simply get all client events then serialize and sent to server using ajax.
$('.submitEvent').click(function(){
var clientEvent = JSON.stringify($('#calendar').fullCalendar( 'clientEvents'));
$.ajax({ // ajax call starts
url: url
data: clientEvent,
dataType: 'json',
success: function(data)
{
// success handler
}
});
});
HTML
<input type="button" class="btn btn-primary submitEvent" value="SUBMIT"/>
thanks
Related
I just want to addclass name for bootstrap fullcalendar popover. I have tried the $(".popover").addClass('fc-ctpopover'); in below script in many places. Its not working for this code.
Comment for further clarification.
$(".popover").addClass('fc-ctpopover');
My expected output <div class="popover fc-ctpopover">
$(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'
},
height: 600,
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,
title: 'the title',
content: function() {
return $("#popoverContent").html();
},
template: popTemplate,
placement: 'left',
html: 'true',
trigger: 'click',
animation: 'true',
container: 'body'
},
true
);
}
calendar.fullCalendar('unselect');
},
eventRender: function(event, element) {
element.popover({
title: element.find('.fc-title, .fc-list-item-title').html() + '<span class="popover-title"><a data-toggle="popover" data-trigger="focus" class="close">×</a></span>',
placement: 'top',
html: true,
trigger: 'manual',
animation: true,
container: 'body',
content: function() {
setTimeout(function() {
element.popover('hide');
}, 20000);
return $('#popover-content').html();
}
}).on("mouseenter", function() {
$(".popover").addClass('fc-ctpopover');
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
$(".close").click(function(e) {
e.stopPropagation();
$(this).trigger("click");
});
}).on("mouseleave", function() {
var _this = this;
setTimeout(function() {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
$(".close").click(function(e) {
e.stopPropagation();
$(this).trigger("click");
});
});
},
eventAfterRender: function(event, element) {
$(".popover").remove();
element.popover('hide');
},
eventClick: function(event, element, view) {
//element.popover('hide');
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href', event.url);
$('#calendarModal').modal();
},
editable: true,
events: [{
title: 'All Day Event',
start: new Date(y, m, 1),
description: 'This is a cool event'
}, {
title: 'Long Event',
url: 'http://stackoverflow.com',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2)
}, {
title: "Conference",
color: "#F6BB42",
start: "2019-06-04",
end: "2019-06-05"
}, {
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d - 3, 16, 0),
allDay: false
}, {
id: 999,
title: 'Repeating Event',
color: '#FB6E52',
start: new Date(y, m, d + 4, 16, 0),
allDay: false
}, {
title: 'Meeting',
color: "#DA4453",
start: new Date(y, m, d, 10, 30),
allDay: false
}, {
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
}
]
});
var popoverElement;
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div id="calendar"/>
I am trying to customize the bootstrap fullcalendar.
The below example the modal popup for every event on click working fine. But I want to achieve the modal for one or two specific event on click.
Comment for further clarification about the question.
$(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'
},
height: 600,
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,
title: 'the title',
content: function() {
return $("#popoverContent").html();
},
template: popTemplate,
placement: 'left',
html: 'true',
trigger: 'click',
animation: 'true',
container: 'body'
},
true
);
}
calendar.fullCalendar('unselect');
},
eventRender: function(event, element) {
element.popover({
title: element.find('.fc-title, .fc-list-item-title').html() + '<span class="popover-title"><a data-toggle="popover" data-trigger="focus" class="close">×</a></span>',
placement: 'top',
html: true,
trigger: 'manual',
animation: true,
container: 'body',
content: function() {
setTimeout(function() {
element.popover('hide');
}, 20000);
return $('#popover-content').html();
}
}).on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
$(".close").click(function(e) {
e.stopPropagation();
$(this).trigger("click");
});
}).on("mouseleave", function() {
var _this = this;
setTimeout(function() {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
$(".close").click(function(e) {
e.stopPropagation();
$(this).trigger("click");
});
});
},
eventAfterRender: function(event, element) {
$(".popover").remove();
element.popover('hide');
},
eventClick: function(event, element, view) {
//element.popover('hide');
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href', event.url);
$('#calendarModal').modal();
},
editable: true,
events: [{
title: 'All Day Event',
start: new Date(y, m, 1),
description: 'This is a cool event'
}, {
title: 'Long Event',
url: 'http://stackoverflow.com',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2)
}, {
title: "Conference",
color: "#F6BB42",
start: "2019-06-04",
end: "2019-06-05"
}, {
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d - 3, 16, 0),
allDay: false
}, {
id: 999,
title: 'Repeating Event',
color: '#FB6E52',
start: new Date(y, m, d + 4, 16, 0),
allDay: false
}, {
title: 'Meeting',
color: "#DA4453",
start: new Date(y, m, d, 10, 30),
allDay: false
}, {
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
}, {
title: 'Birthday Party',
color: "#37BC9B",
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false
}, {
title: 'Click for Google1',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://stackoverflow.com',
}
]
});
var popoverElement;
});
.modal .modal-backdrop.in {
opacity: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div id="calendar"/>
<div id="calendarModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="modalTitle" class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
</div>
<div id="modalBody" class="modal-body"> modal content </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
For example, you want to display the model for Conference, Birthday Party and Meeting. Add the value in the array. After that check if the click event exists in array enable the model for that.
like.
eventClick: function(event, element, view) {
//Add the specific event list in array.
var event_array = ['Conference', 'Birthday Party', 'Meeting'];
var title = event.title;
//On click of event check clicked event exists in event_array or not. If exists display the model.
if($.inArray(title, event_array) !== -1){
//element.popover('hide');
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href', event.url);
$('#calendarModal').modal();
}
},
Following Data is being passed about events:
[{"title":"my First Entry","start":"2016-09-27T11:47:00","end":"2016-09-27T12:47:00","allday":false}]
It renders entry only in month view. eventRender is also not fired for day and week
Javascript
var calendar = $('#calendar').fullCalendar({
editable: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "http://localhost:8000/fetch",
// events: [
// {
// title: 'Lunch with All',
// start: new Date(2016, 9, 27, 12, 0),
// end: new Date(2016, 9, 27, 13, 0),
// allDay: false
// },
// {
// title: 'Birthday Party',
// start: new Date(y, m, d + 1, 19, 0),
// end: new Date(y, m, d + 1, 22, 30),
// allDay: false
// },
// {
// title: 'Click for Google',
// start: new Date(y, m, 28),
// end: new Date(y, m, 29),
// url: 'http://google.com/'
// }
// ],
// Convert the allDay from string to boolean
eventRender: function (event, element, view) {
var start = event.start;
console.log("Rendered");
var end = moment(event.end);
event.end = end;
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: false,
selectHelper: false,
select: function (start, end, allDay) {
var title = prompt('Event Title:');
var url = prompt('Type Event url, if exits:');
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:8888/fullcalendar/add_events.php',
data: 'title=' + title + '&start=' + start + '&end=' + end + '&url=' + url,
type: "POST",
success: function (json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: false
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: false,
eventDrop: function (event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:8888/fullcalendar/update_events.php',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (json) {
alert("Updated Successfully");
}
});
},
eventResize: function (event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:8888/fullcalendar/update_events.php',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (json) {
alert("Updated Successfully");
}
});
}
});
It works fine for all views if date is set in this format new Date(2016, 9, 27, 12, 0)
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.
I'm trying to get fullcalendar on a phonegap app. My code is working on a browser but on the android emulador it is just not showing the calendar.
I also tried to get it inside 'device ready' but if I do that I get Object [object Object] has no method 'fullCalendar' error.
inside device ready:
var app = {
initialize: function() {
this.bindEvents()
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false)
$(document).on("pageshow", app.onDeviceReady);
},
onDeviceReady: function() {
app.receivedEvent('deviceready')
},
receivedEvent: function(id){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
}
if i put it outside it will run fine on browser.. but not on emulator :/
demo: http://jsfiddle.net/KrZJr/86/
Is it possible to use fullcalendar on android or is it a plugin with the same effect that works on android?
found an example that works on phonegap. http://jsfiddle.net/Gajotres/ZSd2C/
had to use pageshow event
$(document).on('pageshow','#index',function(e,data)