Fullcalendar recurring event exclusion - javascript

I'm using fullcalendar with drag-drop external events and json data source.
These events repeat weekly by default.
I want to now add functionality that enables a user to delete a single instance of this repeating event (like in google calendar).
I believe this will require some sort of mechanism to exclude a certain event date from a repeating event.
I wasn't able to find anything in the fullcalendar documentation that would support this sort of behaviour out-of-the-box.
I would prefer a client-side only solution to this.

I have created a jsfiddle that shows how to display a daily concurrent event with the exception of one date. I have included a custom property (excludedDate).
In your solution, you will need to include a property called, say, excludedDates which contains an array of dates, and every time you want to delete a single instance you just add the date to this property array. Then, at the eventRender you will loop through this array to see if you need to exclude the event for any given day.
eventRender: function(event, element, view) {
var theDate = event.start
var excludedDate = event.excludedDate;
var excludedTomorrrow = new Date(excludedDate);
//if the date is in between August 29th at 00:00 and August 30th at 00:00 DO NOT RENDER
if( theDate >= excludedDate && theDate < excludedTomorrrow.setDate(excludedTomorrrow.getDate() + 1) ) {
return false;
}
}

Related

How to select a fixed time for the due date of an order if there are multiple options?

I am modelling a job shop process and use the event block to generate orders for the order arrival process. In action of the event block, the due date of the generated order has to be specified. This value however is not fixed. It should either be 17:45:00 PM, 19:15:00 PM or 20:15:00 PM. However, the possibility that time 17:45:00 is chosen should be twice as likely as the chances for choosing the other two times. How can I define the due date of an order according to these conditions?
My process looks like this
I first tried given the order a fixed due date, like this:
Order order = new Order();
// Set due date as fixed time
Calendar cal = Calendar.getInstance();
cal.set(Calendar.HOUR_OF_DAY,17);
cal.set(Calendar.MINUTE,30);
cal.set(Calendar.SECOND,0);
cal.set(Calendar.MILLISECOND,0);
order.atrDueDate = cal.getTime();
// proc time for single orders
order.varProcTime = triangular(1,2,3);
order.markParametersAreSet();
enter1.take(order);
This works, but I do not know how to choose a due date from 3 different options.
This is not the optimal answer and there are more general ways of doing this, but a simple solution would be
if(randomTrue(0.5)){//50% chances of choosing this date
cal.set(Calendar.HOUR_OF_DAY,17);
cal.set(Calendar.MINUTE,45);
}else if(randomTrue(0.5)){//25% chances of choosing this date
cal.set(Calendar.HOUR_OF_DAY,19);
cal.set(Calendar.MINUTE,15);
}else{//25% chances of choosing this date
cal.set(Calendar.HOUR_OF_DAY,20);
cal.set(Calendar.MINUTE,15);
}

Is there a rangeselector event to get dates outside the data range?

I am looking to build a chart which loads and displays years worth of time-series data, collected over years, but loaded dynamically in small chunks (1 day, 1 week, 1 month). For instance, I am looking at a chart which is displaying data for 8/21 -> 8/22.
I would like to use the built-in range selector in order to change the date range, for example to change the From date to 8/15, and then go fetch and display data for 8/15 -> 8/22.
I am looking for an event or API which is triggered when the date rangeselector is modified by a user. I have found and experimented with xAxis.events. setExtremes, but this doesn't seem to have what I need. Before triggering this event, the chart does some form of sanitization, the date I give it is discarded and the To-From dates in the event are normalized to the min-and-max range of the data itself. For example, suppose I have data loaded into my chart from 8/19 -> 8/22 (3-day window), but I have my chart zoomed in to 8/21 -> 8/22 (1 day). I would like to see data from 8/15 -> 8/22 so I change the From date to 8/15. The event that gets fired changes the min I entered to be 8/19, as that is the minimum edge of the existing data, but what I would like is an event that says the date was changed to 8/15.
I have also tried to hack something in using the rangeSelector.inputDateParser API, but this is definitely not ideal, and I don't think it will even work, as I can't tell [i]which[/i] date field was edited.
I'm not sure what else to try, but i'm worried I will need to implement/integrate my own custom range selector separately, which I would rather not do.
Here is a jsFiddle using setExtremes. (It's from the API docs, not my code, but it's a good representation of what I'm trying to do)
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/xaxis/events-setextremes/
What I would like to happen is, when I set the From date to '2001-01-01', that the setExtremes event (or some other event) returns 2001-01-01 (Or any equivalent in some other format). But the problem is, it changes 2001 to 2007, because that's the lowest data value, before telling me what value was entered.
Is there any way to detect or trigger an event when I change the date in the range selector to a date outside of the range of the data?
There is no such event in the Highcharts core. However, it can be easily added by wrapping RangeSelector.prototype.drawInput and adding these lines of code:
// Custom event
H.fireEvent(rangeSelector, 'RSValueProvided', {
inputValue: inputValue,
dataMin: dataMin,
dataMax: dataMax
});
After that, you can add a callback function that will be invoked when the event occurs:
chart: {
events: {
load: function() {
var chart = this;
Highcharts.addEvent(chart.rangeSelector, 'RSValueProvided', function(e) {
var date = +new Date(e.inputValue);
if (date < e.dataMin || date > e.dataMax) {
console.log(e.inputValue);
}
});
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/cf0h8tp5/
API reference:
https://api.highcharts.com/class-reference/Highcharts#.fireEvent%3CT%3E
https://api.highcharts.com/class-reference/Highcharts#.addEvent%3CT%3E

What's the difference between bootstrap datepicker "setDate" and "update" methd?

I've tried to use
$element.datepicker('setDate', dateObj);
And
$element.datepicker('update', dateObj);
to set the internal date of a datepicker. But it looks like if i use setDate, the default selected date(which is the start date) is still highlighted, but update will clear the default selected date and use the new dateObj as selected
I wonder how to clear the default selected date with setDate
I've been playing around trying out different alternatives to the API and according to my findings, there's no difference between those two.
$("#calendar").datetimepicker("update",new Date());
$("#calendar").datetimepicker("setDate",new Date());
It seemed to me confusing and suspicious that they'd put in two different methods for the same task so I started asking around. By the word of mouth, I've learned that the former was originally intended to be the general setter of all properties but due to technical issues, the functionality was dropped (only retaining the date setting capability due to compatibility issues for pre-existing code).
$("#calendar").datetimepicker("update", "weekStart", 4);
The above was but isn't anymore changing the starting week of the control.
Difference between bootstrap datepicker “setDate” and “update” is as follows:
$("#calendar").datetimepicker("setDate",new Date()); = triggers an event "change"
$("#calendar").datetimepicker("update",new Date()); = no triggers an event "change"

Kendo Scheduler EditorTemplate - set recurrence date to selected date

I'm working on a Kendo Scheduler, which has a custom EditorTemplate for adding a new task. And now, if I want to make a task that has to be recursive (that is, it is should be repeated daily, weekly, etc.), it does not, as standard, set it's recursive date to the selected date, but the actual date of the week.
I have tried to comment the EditorTemplate out, and I can see that it then sets the recursive date to the selected date - so as a standard it works as it should.
I have also tried to add some JavaScript to check the correct checkbox, but I could not get that to work as well
The recursive part of the template looks like:
<div data-container-for="recurrenceRule" class="k-edit-field">
#(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule).Messages(m =>
SchedulerHelper.MessageLocaliztion(this, m))
.HtmlAttributes(new { data_bind = "value:recurrenceRule" }))
</div>
Any idea how to make it work as it does as standard ? Or make a EditorTemplate where you exclude the recursiveness, and it takes the standard ?
You can take help of the SchedularEvent Framework
I'm not certain this is the answer to your question, but we needed to set the change event in the kendoRecurrenceEditor (or kendoMobileRecurrenceEditor) so that when the user makes a change, it comes back into the parent event properly. This was the direction from Kendo Support.
recurrenceEditor.kendoRecurrenceEditor({
start: new Date(event.start),
value: event.recurrenceRule,
timezone: self.scheduleConfig.timezone,
messages: self.scheduleConfig.messages.recurrenceEditor,
change: function () {
event.set("recurrenceRule", this.value());
}
});

FullCalendar Select Method

I am creating a interactive calendar using FullCalendar but I have run into a nice to have snag.
When the person makes the hour range selection (click and drag) I have a dialog open and allows the user to title their event and modify the date/time selection if needed. What I would like is to re-render the selection with the new date/time selection from the dialog if it changes.
Currently when I run the select method my selection area is just removed from the view, I want it to stay and be updated to the current selection.
Here is my code
$('#UserCalendarToHour, #UserCalendarToMin').change(function(){
var allDay = false;
var startDate = new Date($('#UserCalendarFromDate').val()+' '+$('#UserCalendarFromHour').val()+':'+$('#UserCalendarFromMin').val());
var endDate = new Date($('#UserCalendarToDate').val()+' '+$('#UserCalendarToHour').val()+':'+$('#UserCalendarToMin').val());
if($('#UserCalendarAllDay').is(':checked')){
allDay = true;
}
$('#calendar').fullCalendar('unselect');
$('#calendar').fullCalendar('select',startDate.toString(),endDate.toString(),allDay);
});
Now what am I missing.
The select method is expecting startDate and endDate as Date objects. You're converting them to text. Also, according to docs,
allDay is a boolean indicating if entire days were selected (days in
month view or the "all-day" slot in the agenda view) or time slots
were selected.
So if you are selecting time slots you need to set it to false.
You'll see it more clearly in the select callback documentation. The same type for arguments seem to apply for the method. It took me a while to realize it. You may get confused with, for instance, the Event Object attributes, which have similar names but are of different type. See it here:
http://arshaw.com/fullcalendar/docs/selection/select_callback/

Categories