Custom content of Fullcalendar event after eventResize - fullcalendar

I try to set dynamically the content of a FullCalendar event after the user would have resized it but I can't figure out how to achieve this, since both eventResize and eventResizeStop don't get the element in their callback.
I have also tried to modify the event in eventResizeStop and to get the value in eventRender (since I noticed that a rerender is called after resize stop) but this ain't work because still get the "old" event content.
Any idea how to achieve this?
$('#calendar').fullCalendar({
eventRender: function (event, element) {
console.log(event.something); // still same value
},
eventResizeStop: function (event, jsEvent, ui, view) {
event.something = 'try to push a new value'; // no effect
$(this).find('.fc-title').replaceWith('something'); // no effect
},
eventResize: function (event, delta, revertFunc, jsEvent, ui, view) {
$(this).find('.fc-title').replaceWith('something'); // no effect
}
});
Mockup of what I would like to achieve:
before user modification:
-----------------
| event content |
-------v---------
after user modification of the length/duration of the event:
-----------------
| event content |
| is now not the|
| same anymore |
-------v---------

I've found the solution. Modifying the event in eventResize is effectively the right way but after doing so, the event should be updated in the calendar respectively an update should be explicitly called
$('#calendar').fullCalendar({
eventRender: function (event, element) {
console.log(event.something);
},
eventResize: function (event, delta, revertFunc, jsEvent, ui, view) {
event.something = 'my new value';
$("#calendar").fullCalendar('updateEvent', event);
}
});

Related

Update and Remove a Single event of the calendar

I need to edit/remove a single event of the callendar, but with my current code, the update/remove afects all events inside the calendar.
Update Attempt:
$('#btn').click(function(){
var evento = $('#calendario').fullCalendar('clientEvents', function(event){
return event.className == 8;
});
evento[0].backgroundColor = "red";
$('#calendario').fullCalendar('updateEvent', evento[0]);
});
It changes the background color of all events. Also, it changes the events title, all to the same (The one with that ClassName).
Remove Attempt:
$('#btn').click(function(){
$('#calendario').fullCalendar('removeEvents', function(event){
return event.className = 8;
});
});
Also, this method removes ALL events.
How may I target a single event ?
UPDATE
Just found the problem:
Even if I target only that specific event with that specific className, this method updateEvent, will update ALL EVENTS THAT SHARE THE SAME ID. Why?
I don't think it's supposed to happen.
You are right in that you should be able to target events using a filter.
When you attempt to remove the event you are using the assignment operator rather than the equals operator. By changing that, your filter should then return true for removing the event with that class.
The following code worked for adding a class to one event and then removing the event using the class.
eventRender: function (event, element) {
if (event.id === 628) {
event.className = "Test";
}
},
eventClick: function (event, jsEvent, view) {
$('#calendar').fullCalendar('removeEvents', function (event) {
return event.className === "Test";
});
}

SemanticUI: how to trigger a form validation maually / in modal

When a modal window is started, there will be no form validation if you use the default way:
$('#someModalWindow')
.modal({
inline: true,
onDeny: function () {
// someting
},
onApprove: function () {
// some action
}
})
.modal('show');
How can a form validation be triggered manually or automatically in the modal window.
I am using meteor below SemanticUI
thanks
I figured out how to do it:
$('#someModalWindow')
.modal({
onDeny: function () {
// someting
},
onApprove: function () {
var validated = $('#myFormId').form('validate form');
if(!validated){
return false;
}
// some action
}
})
.modal('show');
hopefully this can help you.

Custom Kendo widget doesn't update viewModel

I'm trying to customize and extend datepicker.
First I extended Binder by customValue:
kendo.data.binders.widget.customValue = kendo.data.Binder.extend({
init: function (element, bindings, options) {
kendo.data.Binder.fn.init.call(this, element, bindings, options);
},
refresh: function(e){
var path = this.bindings.customValue.path,
source = this.bindings.customValue.source,
value = source.get(path);
this.element.value(value);
},
change: function(e){
// this method is not triggered
debugger;
}
});
Then I extended DatePicker widget:
CustomDatePicker = kendo.ui.DatePicker.extend({
init: function(element, options) {
kendo.ui.DatePicker.prototype.init.call(this, element, options);
this.bind('change', this.onChange);
},
options: {
name: "CustomDatePicker",
},
onChange: function(e){
debugger;
},
});
kendo.ui.plugin(CustomDatePicker);
The method 'refresh' of the custom binder is triggered when a view-model changes, so data can flow from the view-model to the widget. It works well.
But I have problem with binding from the widget to the view-model (reverse flow).
At first I thought that the change in the datepicker trigger 'change' method in 'customValue' binder, but it doesn't.
CustomDatePicker.onChange method is triggered, but inside it the view-model is out of scope, so view-model can't be set.
My question is, how to update the view-model, when value of the widget is changed?
Thank for advice.
Only for illustration widget is initialized like this:
<input
data-role="datepickercustom"
data-bind="customValue: data"
data-format="dd.MM.yyyy" />
Kendo doesn't automatically setup the call to the change function in the binding. You will need to bind the change function to the change event of the widget yourself.
kendo.data.binders.widget.customValue = kendo.data.Binder.extend({
init: function (widget, bindings, options) {
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
var that = this;
$(widget.element).on('change', function () {
that.change();
});
},
.
.
.
change: function() {
// this method will now be triggered
debugger;
}
});
Be sure to follow the widget binding pattern (widget, bindings, options) not (element, binding, options).
It doesn't seem you need to extend the DatePicker widget, unless you need to implement other behaviors separate from updating the view model.

drag and drop images to event in fullcalendar

I really hope to get some help with this. I'm doing a calendar for kids using fullcalendar. It should be possible to drag and drop som image icon into the events of the calendar. It looks someting like this: http://boerne.migraeniker.dk/kalender_filer/default.html
But how can I display the image that I drop inside the event.
The code that should drop the image is here:
drop:function(start,end, allDay) {
var originalEventObject = $(this).data('event');
var copiedEventObject = $.extend({}, originalEventObject);
if (copiedEventObject.title) {
start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://boerne.migraeniker.dk/kalender_filer/add_events.php',
data: 'title='+copiedEventObject.title+'&start='+ start +'&end='+ end,
type: "POST",
success: function(json) {
}
});
calendar.fullCalendar('renderEvent',
{
title: copiedEventObject.title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
I really hope this makes sense otherwise I can post more of the code.
Take a look at External dragging demo
You need to declare droppable and drop in $('#mycalendar')
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
JSFiddle

jqueryui dialog event: how to attach an even only once

JqueryUI:
The code below fires an alert every time the box is closed, but how can I make it so it only does this for once and not every time.
$("#box").dialog({
close: function () {
alert(999);
}
});
This was how I did it before using jQueryUi:
$("#box").one("click", function () {
alert(999);
return false
});
According to the docs, the .close() method also has a corresponding event: dialogclose. So you should be able to do this:
$("#box").one("dialogclose",function() {
alert(999);
});

Resources