My full Calendar show data correctly using ajax . so i want to change the data on previous button click. But the button click function not working and how can i pass the data as parameter on previous and next button click
<script src="../assets/global/plugins/fullcalendar/lib/moment.min.js"></script>
<script src="../assets/global/plugins/fullcalendar/lib/jquery.min.js"></script>
<script src="../assets/global/plugins/fullcalendar/fullcalendar.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json",
data: "{}",
url: "attendance-full.aspx/GetEvents",
dataType: "json",
success: function (data) {
$('div[id*=calendar1]').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: $.map(data.d, function (item, i) {
var event = new Object();
event.id = item.EventID;
event.start = new Date(item.StartDate);
event.title = item.EventName;
return event;
}), eventRender: function (event, eventElement) {
if (event.ImageType) {
if (eventElement.find('span.fc-event-time').length) {
eventElement.find('span.fc-event-time').before($(GetImage(event.ImageType)));
} else {
eventElement.find('span.fc-event-title').before($(GetImage(event.ImageType)));
}
}
},
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
$('div[id*=calendar1]').show();
//below code not working
$(".fc-prev-button span").click(function () {
alert("Hai");
})
});
My console is error free .
$(".fc-prev-button span").click(function () { runs before your calendar is created (because you wait to create the calendar until ajax has run, and ajax is asynchronous). Therefore there is no button for your code to bind the event to.
Simply move
$(".fc-prev-button span").click(function () {
alert("Hai");
});
to the end of your ajax "success" function.
N.B. I would also suggest that you re-consider how you're getting your events. Currently you fetch all events into the calendar, and the calendar cannot be displayed until the events are fetched. If your application is live for a long time, and builds up a lot of historical events, consider what will happen after a few years when there is a long list of events - it will take a long time to load them all, with no calendar on screen, and unless your situation is unusual, then probably no-one will look at anything from a long time ago, so it's a waste of time to load them.
FullCalendar is actually designed to work in a way that fetches only the events that are needed for the view and date range currently being displayed. So you fetch the minimum required events. If the user changes the view or date to something else, fullCalendar requests more events from the server, and sends it the date range required. This is usually much more efficient.
In your case you could re-write it something like this snippet below. Bear in mind you'd also have to change your GetEvents server method so that it filters the list of events by the dates supplied. I can't see that code so I can't advise exactly what you would need to do, but hopefully it will be fairly simple to add a couple of extra parameters and add a clause to your database query to compare the dates.
$(document).ready(function() {
$('div[id*=calendar1]').show();
$('div[id*=calendar1]').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: function(start, end, timezone, callback) {
$.ajax({
type: "POST",
contentType: "application/json",
data: '{ "start": "' + start.format("YYYY-MM-DD") + ', "end": ' + end.format("YYYY-MM-DD") + '}',
url: "attendance-full.aspx/GetEvents",
dataType: "json",
success: function(data) {
var events = $.map(data.d, function(item, i) {
var event = new Object();
event.id = item.EventID;
event.start = new Date(item.StartDate);
event.title = item.EventName;
return event;
});
callback(events);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
},
eventRender: function(event, eventElement) {
if (event.ImageType) {
if (eventElement.find('span.fc-event-time').length) {
eventElement.find('span.fc-event-time').before($(GetImage(event.ImageType)));
} else {
eventElement.find('span.fc-event-title').before($(GetImage(event.ImageType)));
}
}
},
});
$(".fc-prev-button span").click(function() {
alert("Hai");
});
});
See https://fullcalendar.io/docs/event_data/events_function/ for more details of the event feed function.
Related
I'm working on an autocomplete that calls a method on my home controller, the javascript calls the method and returns the array. However the values do not display on the text box drop down, nothing does.
If I use a straight array as the source and don't call the home controller then it works just fine.
I don't see what I'm missing here, so I narrowed down the home controller method just to return an array using no logic until I figure this problem out.
Home Controller Method:
public string[] GetPatientName()
{
var names = new List<string> { "Bent","Boon","Book", "Al", "Cat", "Doe", "Ed", "Fox", "George" };
return names.ToArray();
}
Javascript:
<script language="javascript" type="text/javascript">
$(function() {
$('#tags').autocomplete({
source: function(request, response) {
$.ajax({
url: "/Home/GetPatientName",
data: "{ 'pre':'" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function(data) {
response($.map(data.d,
function (item) {
alert(item);
return { value: item }
}));
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
delay: 0
});
});
</script>
HTML
<form>
<input id="tags" type="text" />
</form>
2 things:
1. From the top of my mind, if it wirked with a regular array and didnt work with the result of jQuery map function you probably need to ad .get() in order to get a clean array. To be precise
$.map(data.d,function (item) {
alert(item);
return { value: item }
}).get();
2. If that doesnt work, you would really have to share more data like what is the "response" function and exactly what response you are getting from the server (you could get that from the web browser's dev tools)
I am using a jQuery jTable and it gives the message first "No Data Available" before it loads the data and displays a long list of it. So is it possible to display an Ajax loader (loading.gif) first while it's loading the data in the background?
Edit #Rex: i Tried this but don't know how to implement it with the jQuery jTable success function.
This is the code I tried:
$(document).on('click', '#PlayStatisticone', function (e) {
function loadingAjax(div_id) {
var divIdHtml = $("#"+div_id).html();
$.ajax({
url: '#Url.Action("_TopPlayedTracksPermissionCheck", "ReportStatistic")',
type: 'POST',
beforeSend: function() {
$("#loading-image").show();
},
success: function (data) {
$("#"+div_id).html(divIdHtml + msg);
$("#loading-image").hide();
$(function () {
$("#PartialViewTopPlayedTracks").load('#Url.Action("_PartialViewTopPlayedTracks", "ReportStatistic")');
});
},
error: function (xhr, textStatus, exceptionThrown) {
var json = $.parseJSON(xhr.responseText);
if (json.Authenticated) {
window.location.href = '/UnAuthorizedUser/UnAuthorizedUser';
}
else {
window.location.href = '/UnAuthenticatedUser/UnAuthenticatedUser';
}
}
});
Any suggestion would be really helpful
Thanks in advance.
It worked just as I wanted... I found it from an another forum
I don't know if it's ok to post worked answers from another forum or not in here:
here's the code that worked:
$(document).ready(function () {
// DOM is ready now
$.post("<%= Url.Action("ActionThatGetsTableOnly") %>",
"",
function(data) { $("#elementToReplaceId").html(); },
"html"
);
});
I am trying to get a list of name and Id at autocomplete. I have keypress event at textbox and called a funstion of ajax post and I am able to get list for selection. I am trying to get Id and Name. If I have binded name in the textbox then where should I have to keep ID so that it could not be visible to user but I can use it when I have to save data. I can use hidden field but how to assign that Id to hidden field id if Select event of Autocomplete is not working. Also, I need to change the hidden field value when another element is get selected from list.
Please Help me regarding this. Thank You.
function SearchClients() {
}
$(document).ready(function () {
$("#txt_Autocomplete").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "../PsychiatricEvaluation/SearchClients",
data: "{'searchtext':'" + document.getElementById('txt_Autocomplete').value + "'}",
dataType: "json",
success: function (data) {
response($.map(data.Data, function (item) {
return {
label: item.Name,
value: item.id
}
}));
},
select: function (event, ui) {
alert("hi");
//$("#txt_Autocomplete").val(ui.item.value);
$("#hdnPkClientId").val(ui.item.id);
},
change: function (e, ui) {
alert("changed!");
},
error: function (result) {
alert('Error');
}
});
}
});
});
Put your jQuery hookups inside of the $(document).ready event:
$(document).ready(function () {
$("#txt_Autocomplete").autocomplete({ ...
});
I am using Full Calender in my application and want to edit the events which was saved earlier.
How can I edit the events? My code is as shown below.
I am using SQL as a database. Just want to edit the event which are displyed in the full calender.
#{
ViewBag.Title = "schedule";
}
#Html.Partial("_Calendar")
<script type="text/javascript">
$(function () {
var date = new Date();
var d = date.getDate();
var y = date.getFullYear();
var m = date.getMonth();
var calendar = $('#calendar').fullCalendar({
header: { left: 'prev,next today', center: 'title' },
selectable: true,
theme: true,
minTime: '8:00',
defaultEventMinutes: 30,
maxTime: '17:00',
allDaySlot: false,
defaultView: 'agendaWeek',
weekends: false,
firstHour: 9,
selectHelper: true,
select: function (start, end, allDay) {
//var date1 = dateFormat(new Date(start).toGMTString(), 'mm/dd/yyyy HH:MM:ss');
//var date2 = dateFormat(new Date(end).toGMTString(), 'mm/dd/yyyy HH:MM:ss');
var title = prompt('Event Title:');
if (!!title) {
$.ajax({
type: "POST",
data: { Start: start.toJSON(), End: end.toJSON(), Note: title },
url: rootURL + "Contractor/schedule/SaveSchedule",
color:'yellow',
dataType: "json",
success: function (data) {
$('#eventToAdd').modal('hide');
calendar.fullCalendar('renderEvent', { title: title, start: start, end: end, allDay: allDay }, true);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#eventToAdd").dialog("close");
}
});
}
calendar.fullCalendar('unselect');
},
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, calEvent, jsEvent, ui, view) {
var date1 = dateFormat(new Date(event.start), 'mm/dd/yyyy HH:MM:ss');
var date2 = dateFormat(new Date(event.end), 'mm/dd/yyyy HH:MM:ss');
$.ajax({
type: "POST",
data: { 'id':event.id, 'Start': date1, 'End': date2},
url: "/Contractor/schedule/UpdateSchedule",
dataType: "json",
success: function (data) {
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
},
editable: true,
events: '#Url.Action("Getevent","Schedule")',
eventColor: '#028323'
});
});
</script>
you could implement following method:
eventRender: function(event, element, view) {}
This function is written in the same way as eventDrop.
The parameter element is the div that forms the event, you can add an onclick event to this or append some html to its contents with a button. That way you can show your popup or navigate to an edit page. You can use something like firebug to inspect and adjust the html and see what is possible.
For more detailed information, you can check http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/
There you can add an onclick handler or maybe an image with an onclick handler. In the onclick you can show a popup of some sort or navigate to an other page. In the popup or the other page you can make a form to edit your event. When the edit is complete reload the events or navigate back to your calendar and you will see the updated event.
i have a couple of queries regarding the fullcalendar by arshaw..
when i select a particular stretch of dates and give an appropriate title as shown here
i get the event rendered in the calendar.. but when i want to save the event (I'm using asp.net) ie say after the user clicks on a save button,the title,startdate,end date has to be written into the events[{}] of the script..for this im using
response.write("script /script(with the tags of course)") after the button click which doesnt work.. would anyone suggest a better or a simpler working way?
also how to disable the selectable property? eg only an admin can set the event and a user can only see the event and not edit it..
I don't think that you can update fullcalendar event JavaScript object with Response.Write() method.
You should use ajax to save event on server side and update calendar on client side.
Do something like this
function saveEvent() {
var event = { startDate: $('#txtDate').val(), description: $('#txtDescription').val(), id: id }
$.ajax({
type: "POST",
async: false,
url: "../UserCalendarService.asmx/SaveEvent",
data: "{'startDate': '" + event.startDate + "','description':'" + event.description + "','id':'" + event.id + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
result = result.d;
eventFound = $('#calendar').fullCalendar('clientEvents', result.id).length;
if (eventFound == 1) {
existingEvent = $('#calendar').fullCalendar('clientEvents', result.id);
existingEvent[0].title = result.title;
existingEvent[0].start = result.start;
existingEvent[0].editable = result.editable;
existingEvent[0].allday = true;
$('#calendar').fullCalendar('updateEvent', existingEvent[0]);
}
else {
$('#calendar').fullCalendar('renderEvent', {
title: result.title,
start: result.start,
id: result.id,
editable: result.editable,
allday: true
},
false // make the event "stick"
);
}
},
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
if (err.Message == 'SomeErrorMessage') {
//handleError, redirect or popup message
}
}
});
}
As for your second question, event object has editable property. It is true or false.
You can found more about it in proper documentation.