Hello i'm trying to work with Fullcalendar (from here http://fullcalendar.io) but I don't find if I can change or delete an event already planning on calendar just by clicking on the event area to edit or delete it ? is that possible ? Thanks for your answers
I'll try this at the bottom of my calendar.html file
$(this).data('eventObject', eventObject);
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
Yes this is possible.
1) Use eventClick: to trigger your function when the user clicks on the event.
2) Modify the event properties as necessary, e.g. event.title = "Test";
3) Call updateEvent on fullCalendar's div, with your modified event as the parameter.
Related
I would like to highlight a selected date.
ex: i already clicked a date and the selected date is inserted in the textbox,now again i clicked the calendar, now the date in the textbox should highlight in the calendar.
Im able to highlight the selected date in dayClick, but couldn't highlight it when he is back to calendar to change the option.
Can someone help me.!
dayClick: function (date, jsEvent, view) {
$(".fc-state-highlight").removeClass("fc-state-highlight");
$("td[data-date=" + date.format('YYYY-MM-DD') + "]").addClass("fc-state-highlight");}
Sorry, my previous answer is not correct.
Change your code line:
$("td[data-date=" + date.format('YYYY-MM-DD') + "]").addClass("fc-state-highlight");
to this:
$('.fc-day[data-date="' + date.format('YYYY-MM-DD') + '"]').addClass("fc-state-highlight");
thank you Asator for your reply
based on your answer i could able to solve in this way
dayRender: function (date, element, view) {
var dateString = moment(displayDate).format('YYYY-MM-DD');
view.el.find('.fc-day-number[data-date="' + dateString + '"]').css('background-color', '#3276b1');
}
how I can run eventClick function defined in fullcalendar in my function called. When I call:
$('#kalendar').fullCalendar.trigger('eventClick', eventID);
browser return typeerror, that trigger is not function. How I trigger mouse click on specific event or call eventClick on specific event to run eventClick, where is programmed edit dialogue?
Thanks for help.
Fullcalendar provides eventClick function in it's configuration as below.
$('#kalendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
OK, I solve my question...
add event id to DIV.fc-content - a tag, which will be better, but
it can't access on this time, is maybe created after event render?
eventRender: function(event, element, calEvent){
var icon = $('<div />');
icon.css('width',"12px");
icon.css('height',"12px");
icon.css('margin',"2px 3px 0 0");
icon.css('display',"inline-block");
icon.css('vertical-align',"text-top");
if(event.status == "CONFIRMED")
icon.css('background-image',"url(images/ico_accept12w.png)");
else
icon.css('background-image',"url(images/ico_help12w.png)");
element.find('.fc-content').attr("id", "event-"+ event.id); // add event id
element.find('.fc-title').prepend(icon);
},
my function to call click event:
it's called click trigger on parent a tag on DIV.fc-content
function zobrazUdalost(id, datum)
{
$('#kalendar<%= idKalendare %>').fullCalendar('gotoDate', moment(datum)); // to go event day
var events = $('#kalendar<%= idKalendare %>').fullCalendar('clientEvents', id);
if(events.length > 0){
$("#event-"+ id).parents("a.fc-day-grid-event").trigger("click"); // call click trigger
}
}
One of the custom properties of my events is TypeId.
What I'd like to do is show the entire container cells in different colors depending on what the TypeId of the event is. For instance, I'd like all cells that contain an event of TypeId = 1 to have a background color of blue, and all cells that contain an event of TypeId = 2 to have a background color of green.
I know you can change the cell's styles in the dayRender callback, but can I access the event that is associated with each cell at that point?
I had similar issue.
You can get cell of event container in eventRender callback - something like this:
eventRender: function(event, element, view) {
var cell = view.dateToCell(event.start);
var eventContainer = view.element.find('tr:eq(' + (cell.row + 1) + ') td:eq(' + cell.col + ')');
//or if you similar
var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
var eventContainer = view.element.find('.fc-day[data-date="' + dateString + '"]');
eventContainer.css('background-color', 'red');
},
You could use eventRender which gives you access to both the event and the element (and the view, if you need that)
eventRender: function(event, element) {
if (event.TypeId === 1) {
$(element).css('background-color', 'blue');
}
}
I have a usercontrol with an asp.net checkbox in it. I'm attempting to write a jquery script to convert that normal checkbox into a three-state checkbox. The states are 'checked', 'unchecked', and 'intermediate'. Clicking on an intermediate state should change the state to checked, clicking on an unchecked state should change the state to checked, and clicking on the checked state should change the state to unchecked.
My idea was to be able to insert a normal asp.net checkbox into the page and then call the jquery function to make it three-state.
Here's my jquery function, which is rough but working:
function SetTriStateCheckBox(checkboxfinder, initialval, originalCkbxUniqueID) {
var i = 0;
var chks = $(checkboxfinder);
if (initialval){ chks.val(initialval); }
chks.hide().each(function() {
var img = $('<img class="tristate_image" src="../Images/tristateimages/' + $(this).val() + '.gif" />');
$(this).attr("checked", ($(this).val()=="unchecked"?"false":"true"));
$(this).attr("name", "input" + i + "image" + i);
img.attr("name", "" + i + "image" + i);
i++;
$(this).before(img);
});
$(".tristate_image").click(function() {
t = $("[name='input" + $(this).attr("name") + "']");
var tval = t.val();
$(this).attr("src", "../Images/tristateimages/" + (tval=="checked" ? "unchecked" : "checked") + ".gif");
switch (tval) {
case "unchecked":
t.val("checked").attr("checked", "true");
break;
case "intermediate":
t.val("checked").attr("checked", "true");
break;
case "checked":
t.val("unchecked").removeAttr("checked");
}
setTimeout('__doPostBack(\'' + originalCkbxUniqueID + '\',\'\')', 0);
});
}
Here's a simplified version of my OnPreRender event handler which registers a startup script:
protected override void OnPreRender(EventArgs e)
{
string tristatescript = " SetTriStateCheckBox('input[id$=\"ckbx1\"]', 'intermediate','"
+ ckbx1.UniqueID + "'); ";
ScriptManager.RegisterStartupScript(this, this.GetType(), "ckbx1_tristate", tristatescript, true);
base.OnPreRender(e);
}
Everything seems to work correctly, except that I'm not hitting the event handler of the original checkbox when I post back, after clicking my newly inserted image. It does hit Page_Load.
If I take out the .hide() part of the jquery, and click on the original checkbox, Request.Params['__EVENTTARGET'] is the same as when clicking the newly inserted image.
I'm not sure where to go from here. Any suggestions?
I decided to go a different way with this. It turns out it's much easier to use an linkbutton, with an image in it, to simulate a three-state checkbox. It has it's own postback events and all you have to do is change the imageurl.
:-)
I have a child window and a parent window with a hiddenfield hdnSelectedFields .I am changing the value of hdnSelectedFields.
Code:
String vStrScript = "<script language=javascript>function CloseParent() {window.opener.document.getElementById('hdnSelectedFields').Value = '" + tempstring + "'; alert(window.opener.document.getElementById('hdnSelectedFields').Value);window.close(); } window.opener.document.forms[0].submit(); setTimeout(CloseParent, 5);</script>";
When I close the window the hdnSelectedFields value is set but when I access the hdnSelectedFields on parent window pageload it shows old value of hdnSelectedFields.
if you see the alert in JavaScriptit shows updated hdnSelectedFields value when parent is loaded completed.
Any suggestion how can I access hdnSelectedFields updated value on parent pageload.
Dee
The property of the input box you want is value, not Value.
first of all: you should go for the #-selector, as ids must be unique per definition!
in your popup:
$(document).ready(function() {
setTimeout(function() {
var hiddenField = $('#hdnSelectedFields', window.opener);
// you could do some checking here, eg. hiddenField.length for ensuring existance
hiddenField.val('new value');
alert(hiddenField.val()); // for debug reason
window.opener.document.forms[0].submit();
window.close();
}, 5);
});
in your opener:
$(document).ready(function() {
var hiddenField = $('#hdnSelectedFields');
var hiddenFieldValue = hiddenField.val();
alert(hiddenFieldValue); // for debug reason
});
edit:
your fatal mistake is following:
function CloseParent() {
window.opener.document.getElementById('hdnSelectedFields').Value = '" + hdnCheckedAttribute.Value + "';
window.close();
}
window.opener.document.forms[0].submit();
setTimeout(CloseParent, 15);
so, what will happen when you open the popup?
... biiig drum roll!
submit the form
wait 15ms
set the hiddenField
somewhere in between pt 1 and 3 your $(document).ready() of your opener happens ...
missing pt 3 (due to parallelism), no value is set to the hiddenField.
you might see my workaround in my solution for your popup, which states:
setTimeout(function() {
[...]
window.opener.document.forms[0].submit();
window.close();
}, 5);
window.opener.$('#hiddenvariable').val('somevalue');