I add fullcalendar.js to my asp.net MVC project.i can save event in database and i have not any problem but when i click event to update that i have not access to id of event to update database record.how can i get the event id from database?
the js code is:
function GetEvent() {
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) {
//$('#modal-responsive').modal('show');
document.getElementById("event-title").value = null;
var title = null;
$.ajax({
url: "/Calender/ToPersian",
type: 'Post',
data: {
start: start,
end: end,
},
success: function (result) {
var startDate = result.SDate.substring(0, 11);
var startHour = result.SDate.substring(11, 23);
var endDate = result.EDate.substring(0, 11);
var endHour = result.EDate.substring(11, 23);
document.getElementById("fromDate1").value = startDate;
document.getElementById("field-4").value = startHour;
document.getElementById("toDate1").value = endDate;
document.getElementById("field-6").value = endHour;
},
});
$(function () {
$("#modal-event").dialog({
resizable: true,
height: "auto",
width: 800,
modal: true,
show: {
effect: 'fade',
duration: 350
},
hide: {
effect: 'fade',
duration: 50
},
buttons: {
"save": function () {
var title = document.getElementById("event-title").value;
var description = document.getElementById("field-3").value;
var startDay = document.getElementById("fromDate1").value;
var startHour = document.getElementById("field-4").value;
var endDay = document.getElementById("toDate1").value;
var endHour = document.getElementById("field-6").value;
//start = document.getElementById("fromDate1").value;
////////////////////////////////////////////////////////
$.ajax({
url: "/Calender/ToGregorian",
type: 'Post',
async: false,
data: {
start: document.getElementById("fromDate1").value + ' ' + document.getElementById("field-4").value,
end: document.getElementById("toDate1").value + ' ' + document.getElementById("field-6").value,
},
success: function (result) {
var mystart = result.SDate;
var myend = result.EDate;
start = mystart;
end = myend;
}
});
////////////////////////////////////////////////////////
if (title) {
$.ajax({
url: "/Calender/Save",
type: 'Post',
data: {
Title: title,
Description: description,
StartDay: startDay,
StartHour: startHour,
EndDay: endDay,
EndHour: endHour
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
$(this).dialog("close");
$('.fc-event-inner').attr({ 'data-start': start, 'data-end': end });
$('.fc-event-inner').uniqueId();
}
calendar.fullCalendar('unselect');
$(this).dialog("close");
},
"close": function () {
calendar.fullCalendar('unselect');
$(this).dialog("close");
}
}
});
});
},
editable: true,
events: function() {
$.ajax({
url: "/Calender/GetEventId",
type: 'POST',
data: { eventId:},
success: function (doc) {
events.push(doc);
callback(events);
}
});
},
///////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////Update Event////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////
eventClick: function (event, jsEvent, view) {
var title = event.title;
var EventStart = event.start;
var EventEnd = event.end;
var eventAllday = event.allDay;
//document.getElementById("event-title").value=title;
//document.getElementById("fromDate1").value = EventStart;
document.getElementById("toDate1").value = EventEnd;
$.ajax({
url: "/Calender/ToPersian",
type: 'Post',
data: {
start: EventStart,
end: EventEnd,
},
success: function (result) {
var startDate = result.SDate.substring(0, 11);
var startHour = result.SDate.substring(11, 23);
var endDate = result.EDate.substring(0, 11);
var endHour = result.EDate.substring(11, 23);
document.getElementById("fromDate1").value = startDate;
document.getElementById("field-4").value = startHour;
document.getElementById("toDate1").value = endDate;
document.getElementById("field-6").value = endHour;
},
});
$(function () {
$("#modal-event").dialog({
resizable: true,
height: "auto",
width: 800,
modal: true,
show: {
effect: 'fade',
duration: 350
},
hide: {
effect: 'fade',
duration: 50
},
buttons: {
"save": function () {
//title = document.getElementById("event-title").value;
//start = document.getElementById("fromDate1").value;
////////////////////////////////////////////////////////
$.ajax({
url: "/Calender/ToGregorian",
type: 'Post',
async: false,
data: {
start: document.getElementById("fromDate1").value + ' ' + document.getElementById("field-4").value,
end: document.getElementById("toDate1").value + ' ' + document.getElementById("field-6").value,
},
success: function (result) {
var mystart = result.SDate;
var myend = result.EDate;
start = mystart;
end = myend;
}
});
////////////////////////////////////////////////////////
if (title) {
title = document.getElementById("event-title").value;
$.ajax({
url: "/Calender/Save",
type: 'Post',
dataType: "Json",
data: {
Title: title,
start: EventStart,
end: EventEnd,
allDay: event.allDay
// Description: description,
//StartDay: startDay,
//StartHour: startHour,
//EndDay: endDay,
//EndHour: endHour
}
});
event.start = start;
event.end = end;
event.allDay = event.allDay;
event.title = title;
calendar.fullCalendar('updateEvent', event);
//calendar.fullCalendar( 'refresh' );
$(this).dialog("close");
$('.fc-event-inner').attr({ 'data-start': start, 'data-end': end });
}
calendar.fullCalendar('unselect');
$(this).dialog("close");
},
"closeو": function () {
calendar.fullCalendar('unselect');
$(this).dialog("close");
}
}
});
});
},
editable: true
});
};
The first parameter of the eventClick callback is an event object which has an id property on it, so you should be able to access it like this: event.id
Related
Using fullcalendar with php scripts for submitting the ajax through to php/myql connection.
I've added a drag and drop feature to the page/fullcalendar and it renders fine on the page, works, and no problems. When you normally click and type an event, its fires the script and uses PHP to add via mysql.
The problem is, once the drag and drop element has been dropped on the calendar, I need to execute the same script as if you were to use when its clicked and typed on. I might have been working on this for too long as now I've confused myself!
Script is:
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// initialize the external events
// -----------------------------------------------------------------
$("#external-events .fc-event").each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data("event", {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
var calendar = $('#calendar').fullCalendar({
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
defaultView: 'agendaWeek',
nowIndicator: true,
weekends: false,
firstday: 1,
forceEventDuration: true,
timezoneParam: 'UTC',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
start: '07:00', // a start time (10am in this example)
end: '19:00', // an end time (6pm in this example)
},
events: "get/engineer_events.php",
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'process/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
},
true
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'process/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Your event has been added.");
}
});
},
eventClick: function(event) {
var decision = confirm("Woah, you're about to delete this, are you sure?");
if (decision) {
$.ajax({
type: "POST",
url: "process/delete_event.php",
data: "&id=" + event.id,
success: function(json) {
$('#calendar').fullCalendar('removeEvents', event.id);
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: 'process/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Event updated successfully");
}
});
}
});
});
</script>
I am working on a web page where I need to create and fill a multiselect dropdown for states based on selected country.
I am using this plugin.
Html :-
#Html.DropDownListFor(m => m.CountryId, Model._CountryList, new { #class = "form-control countries", #tabindex = "12", #id = "ddlCorrCountry" })
#Html.DropDownListFor(m => m.StateIds, Model._StateList, new { #class = "form-control ms-parent multiselectmulticolumnddlstate nopadd states", #tabindex = "13", #id = "ddlCorrState" })
jQuery (Update):-
function makeMultiSelect() {
$('select.multiselectmulticolumnddlstate').multipleSelect({
multipleWidth: 190,
width: '100%',
filter: true,
multiple: true,
position: 'bottom',
animate: 'none', // 'none', 'fade', 'slide'
placeholder: '-- Select --',
selectAllText: 'Select All',
allSelected: 'All Selected',
countSelected: '# of % selected',
noMatchesFound: 'No matches found',
onClick: function () {
},
onOptgroupClick: function () {
},
onUncheckAll: function () {
},
onClose: function () {
}
});
}
$(document).ready(function () {
makeMultiSelect();
$('body').on('change', '#ddlCorrCountry', function () {
GetAllStates();
});
function GetAllStates() {
try {
$('#ddlCorrState').empty();
var params = { "SId": $('#ddlCorrCountry').val(), "All": false }
$.ajax({
type: "POST",
url: "/utility/getstates",
data: JSON.stringify(params),
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
debugger;
$.each(data, function () {
$('#ddlCorrState').append("<option value=" + this.Value + ">" + this.Text + "</option>");
});
makeMultiSelect();
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText + ' Error:' + errorThrown);
}
});
}
catch (ex)
{ alert('EX:' + ex.message); }
}
});
On page load I am getting below first image which is correct, but while changing/selecting any country its totally distorts as shown in image 2 and even state dropdown is not opening by clicking on it.
Note here I am calling a partial view in modal popup, TIA.
Just need to call plugin function again after rebinding the dropdown.
function makeMultiSelect() {
$('select.multiselectmulticolumnddlstate').multipleSelect({
multipleWidth: 190,
width: '100%',
filter: true,
multiple: true,
position: 'bottom',
animate: 'none', // 'none', 'fade', 'slide'
placeholder: '-- Select --',
//addTitle: 'Sunil',
//delimiter: ', ',
//minimumCountSelected: 3,
selectAllText: 'Select All',
allSelected: 'All Selected',
countSelected: '# of % selected',
noMatchesFound: 'No matches found',
onClick: function () {
//$("#<%= hdnfld.ClientID %>").val("1");
},
onOptgroupClick: function () {
//$("#<%= hdnfld.ClientID %>").val("1");
},
onUncheckAll: function () {
//$("#<%= hdnfld.ClientID %>").val("1");
//unSelectAll();
},
onClose: function () {
//var hdnVal = $("#<%= hdnfld.ClientID %>").val();
//if (hdnVal == "1") {
// $('#cover').show();
// $(".myhdnBtn").click();
//}
}
});
}
$(document).ready(function () {
makeMultiSelect();
$('body').on('change', '#ddlCorrCountry', function () {
GetAllStates();
});
function GetAllStates() {
debugger;
$('#ddlCorrState').find('option').remove(); $('#ddlCorrState').empty();
$.ajax({
type: "post", url: "/city/getstates", data: { CountryId: $('#ddlCorrCountry').val(), IsAll: true }, datatype: "json", traditional: true, success: function (data)
{
$.each(data, function (index, value) {
$('#ddlCorrState').append('<option value="' + value.Value + '">' + value.Text + '</option>');
});
makeMultiSelect();
}
});
}
I'm working with jQuery fullcalendar. This is the initialisation of my fullcalendar:
$(document).ready(function(){
if($('#calendar').length) {
var dbEvents = <?php echo $events; ?>;
var calEvents = getEvents(dbEvents);
var calendar = $('#calendar').fullCalendar({
left: 'title',
center: '',
right: 'prev,next',
weekends: false,
weekNumbers: true,
weekNumberCalculation: "ISO",
defaultView: 'month',
defaultDate: moment(),
height: 450,
events: calEvents,
eventClick: function(calEvent, jsEvent, view) {
displayEvent(calEvent, calendar);
}
});
}
});
/**
* #returns {Array}
*/
function getEvents(dbEvents)
{
calendarEvents = [];
$.each( dbEvents, function( key, value ) {
calendarEvents.push(createEvent(key, value));
});
return calendarEvents;
}
/**
* #param eventStart
* #param eventData
* #returns {{start: *, allDay: boolean, backgroundColor: string, title: (string|*), textColor: string, data: *}|*}
*/
function createEvent(eventStart, eventData)
{
if (eventData.full === true) {
calendarEvent = {
start: eventStart,
allDay: true,
backgroundColor: '#7B040B',
title: 'Volzet',
textColor: '#FFFFFF',
data: eventData
};
return calendarEvent;
}
eventTitle = eventData.total_count + ' / ' + eventData.limit;
calendarEvent = {
start: eventStart,
allDay: true,
backgroundColor: '#076d09',
title: eventTitle,
textColor: '#FFFFFF',
data: eventData
};
return calendarEvent;
}
function displayEvent(event, calendar)
{
eventPopup = $("#popitup").bPopup({
content:'iframe',
loadUrl:'/application/packages/reservatie/event.php?date=' + event.data.date_id,
onClose: function () {
//#todo: update events
$('#calendar').fullCalendar('refetchEvents');
}
});
eventPopup.trigger('click');
}
As you can see in the function displayEvent I have the function on close of the popup where I try to refresh the events with refetchEvents.
The problem here is that I doesn't do anything... . The events aren't refreshed .. What could be the solution here?
everyone, please help me with the code. I am trying to send an ajax after creating a new record in the calendar. Here is my code:
$(document).ready(function()
{
var events = <?php echo json_encode($data)?>;
for(var i in events)
{
if(events[i].allDay === "false")
{
events[i].allDay = false;
}
if(events[i].allDay === "true")
{
events[i].allDay = true;
}
}
var calendar = $('#calendar');
var aId = calendar.attr('aId');
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: events,
selectable: true,
selectHelper: true,
select: function(start, end, allDay, jsEvent, view) {
var title = prompt('Заглавие:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end,
allDay: allDay
};
//var newDate = new Date(formatDate(eventData.start));
$.post(
"/panel/agentTasks/addEvent"
, {
type: 'add',
title: title,
start: start,
end: end,
aId: aId,
allDay: allDay
}, function( data ) {
if(data === 'success');
//location.reload();
}, "json");
calendar.fullCalendar('renderEvent', eventData, true); // stick? = true
}
calendar.fullCalendar('unselect');
},
editable: true,
eventLimit: true,
axisFormat: 'HH:mm',
timeFormat: {
agenda: 'H:mm{ - h:mm}'
},
slotMinutes: 15,
allDayText: 'за целия ден',
eventResize: function(event, delta, revertFunc) {
$.post(
"/panel/agentTasks/addEvent"
, {
type: 'resize',
end: moment(event.end).format('YYYY-MM-DDTHH:mm:ssZ'),
id: event.id
});
},
eventClick: function(event, jsEvent, view) {
var title = prompt('Заглавие:', event.title);
if (title && event.id){
event.title = title;
$.ajax({
url: '/panel/agentTasks/addEvent',
data: 'type=changeTitle&title='+title+'&eventId='+event.id,
type: 'POST',
dataType: 'json',
success: function(response){
if(response.status == 'success')
calendar.fullCalendar('updateEvent',event);
//странно, но не работи, може би защото е стара версия на плъгина, за това ще презаредя страницата; криво решение, но поне докато се открие друго решение;
location.reload();
},
error: function(e){
alert('Error processing your request: '+e.responseText);
}
});
}
},
eventDrop: function(event) {
$.post(
"/panel/agentTasks/addEvent"
, {
type: 'resetDate',
title: event.title,
start: moment(event.start).format('YYYY-MM-DDTHH:mm:ssZ'),
end: moment(event.end).format('YYYY-MM-DDTHH:mm:ssZ'),
id: event.id,
allDay: event.allDay
}
);
},
eventDragStop: function(event,jsEvent) {
var trashEl = $('#calendarTrash');
var ofs = trashEl.offset();
var x1 = ofs.left;
var x2 = ofs.left + trashEl.outerWidth(true);
var y1 = ofs.top;
var y2 = ofs.top + trashEl.outerHeight(true);
if (jsEvent.pageX >= x1 && jsEvent.pageX<= x2 &&
jsEvent.pageY>= y1 && jsEvent.pageY <= y2) {
var r = confirm('Сигурен ли сте, че искате да изтриете?');
if(r === true){
$.post(
"/panel/agentTasks/addEvent"
, {
type: 'deleteDate',
id: event.id
}
);
calendar.fullCalendar('removeEvents', event.id);
}
}
}
});
});
</script>
Everything else is working fine. I am using the latest fullcalendar version. The error i get - "TypeError: this._ordinalParse is undefined". Any suggestions?
I have managed to get events to add to the database by calling addevents.php and passing variables via ajax to the php script. I have events.php that SELECTS everything from the table and passes it back to the calendar (default.html) as a string. However the calendar will not populate.
events.php
<?php
// List of events
$json = array();
// connection to the database
$mysqli = new mysqli("localhost", "root", null, "fullcalendar");
//check connection
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
//fetches and sends data in string
$result = $mysqli->query("SELECT * FROM calendar_data ORDER BY id");
$display = $result->fetch_array(MYSQLI_ASSOC);
echo json_encode($display);
?>
default.html
<!DOCTYPE html>
<html>
<head>
<link href='css/fullcalendar.css' rel='stylesheet' />
<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "http://localhost:80/fullcalendar/events.php",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:80/fullcalendar/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end ,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:80/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) {
start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:80/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
}
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 720px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>