Adding dummy events to Full Calendar to make slots - javascript

Is there a way to add dummy events to Full calendar to divide each day into slots in month view, that is lets say i want three slots in a day nad there is space for 5 so i add an event, then add a dummy event which is transparent and doesn't show, then add event and so on so that there are three slots there. Is there a way to add the events in a loop or something, i can handle their sorting i.e i just need to add two dummy events to each box and the rest will be done. So is there an easy way to do this short of making so many events and adding them with the real events?
EDIT :
OK the given approach doesn't work because this way instead of making slots, it just occupies the first three positions, now if it were single day events and i added an event whose start time fell between the start times of the dummy events, it would automatically be placed between them, which is what i want to achieve.

It seems that your problem doesn't relate directly with "dummy" events. But, in any case, you can have arbitrary events created by a function you can use as the source of your events, which you can bind to the events property.
http://arshaw.com/fullcalendar/docs/event_data/events_function/
var calendar = $("#calendar").fullCalendar({
// your calendar options (...)
events: function(startDate, endDate, callback) {
callback({title: "Dummy event",
start: startDate,
end: endDate});
}
)};
This function is going to be invoked when the calendar moves into another week or month, for example, returning a dummy event for the period.

Related

Fullcalendar: Events with open and closed day background/marker

I was building a Calendar with dynamic events.
Simplest representation of my event object
id : " sdsddsd "
start : "2018-05-13T0..."
end : "2018-05-26T0"
open_monday: true
open_tuesday: false
open_wednesday: true
open_thursday: false
...
So in the month view calendar, I wanted to show my events and within the event if open_monday is true then set the background of that day grid to green. The following Tuesday will use the value open_tuesday and it is false so it will display red.
The red and green background will only be inside an Event. If the day grid isn't within any event, it will be left as blank.
How can I do this. Or is there a better way to do this using resources, constraintsetc. ?.
Thanks.
I am not sure I understand, but it is rather strange to pass the whole list of open/closed weekdays with each event. You should rather determine which weekday your event is and act accordingly. Just add an eventRender callback field to your calendar to control exactly the layout of the HTML element rendering the event. See
https://fullcalendar.io/docs/eventRender
To know the weekday of an event, use
moment(event.start).day()
See
https://momentjs.com/docs/#/get-set/day/
Alternatively, you can add an eventDataTransform field to your calendar, which will be applied to each event when it is loaded, so you can change any of its layout specifiers (color, backgroundColor, className...), see list at
https://fullcalendar.io/docs/event-object

Fullcalendar eventReceive disable time slot

I would like to disabled slot time on drag and drop event when the slot has been already taken. How could I make it work?
I'm using Fulcalendar Event javascript and my event duration is only 15 minutes like this:
I checked the doc but didn't found how. I think I have to compare the title event already taken to blank in jQuery before accept the new drag and drop event if it's return true.
You can use the eventOverlap option in fullCalendar, like this:
eventOverlap: false
This will mean that the UI will prevent events from being dragged or resized such that they fully or partially take up space occupied by an existing event.
See https://fullcalendar.io/docs/event_ui/eventOverlap/ for more details.

Add multiple rows dynamically in jQuery DataTables(with FIDDLE)

I am trying to add new rows on cell click using DataTables API.
Currently, I am able to add the row for the first time. But from second time on-wards, it is acting a bit weird. I was able to create this example for any of you to give it a shot.
After much work throughout the day, this is what I could accomplish.
EXAMPLE TO WORK UPON
Doing indexing manually is not the best idea considering that Datatables does this internally anyway.
Here's the official how-to for the index column: https://datatables.net/examples/api/counter_columns.html
The only problem here is that row.add() can only append a row (i.e. can't insert into arbitrary position). To overcome this you can retrieve the internal table data, modify it and put it back again. E.g.
var newRowData = [
"",
'New Name',
'New Position',
'New Office',
26,
'New Date',
'New Salary'];
tableApi.row.add(newRowData);
var data = datatable.fnGetData(); // get data
datatable.fnClearTable(false); // erase the data in the table
data.splice(currentRowIndex + 1, 0, data.pop()); // move the row of interest into desired position
datatable.fnAddData(data); // put data back
Full example: JSFiddle
That code of yours is somewhat off a mess. Here are some of the problems:
The AddNewRows() function is called by an onclick event in the html of the td (but not for all rows?). This also means is does not work with the newly added rows.
In the AddNewRows() function you use alot of $('#example').DataTable() instead of (re-)using the variable table.
In each new call to AddNewRows() you add a jQuery click event to all rows of the table (before adding the new row, so the event is not bound for the new row). After the e.g. fifth call to the function all rows have five events bound and so there are two times five alerts ...
The AddNewRows function is called with an onclick event on the td and after the function finished the click event propagates to the tr and the newly bound event for the tr is immediately called (plus all the events from previous calls, see previous point). Why not just use one event? Also the newly added event on the tr also works for click on other tds then the one which original hat the call to AddNewRows().
Try to simplify your code, maybe even build it up from scratch so that it only does what it is supposed to do. After that, come back here if you have still problems left.

amCharts Minimal zoom range (minimal period selector range)

I try to use amCharts. I have a chart that represent dayly data. I can't make so user wouldn't be able to choose period less than 5 days (i dont want send 5 days points to chart)
Also i can attach changed event to period selector, but chart zooming and chart scroll bar have no any events and methods i could use.
I need to do so user will see message "please select range that is more than 5 days" when he tries to scroll, select period and zoom chart. And set chart zoom to 5DD.
Also i mentioned that period selector changed event, fire every time when blur event fired on inputs, i think it's not right behavior. It should fire when date changed, yep?
chart.periodSelector.addListener('changed', function(){
alert('changed');
});
I have date picker that attached to period selector inputs (it don't permit user to select less than 5 days range), but i can only update my datepicker ranges only if user input date, i can't to do anything if he zoomed, scrolled chart. I don't see any events in your API for that.
Thanks for your help! Will wait any advice.
Use zoomed event instead.
chart.addListener('zoomed', function (event) {
// Your code
}
And now, to get the selector's start and end date, use this:
event.startDate
event.endDate

jQuery range slider - any event other than slidestart and slidestop

I can read slidestart and slidestop events. However what I want is an event in between. Basically if I pull or swipe the slider to the right then I would like to know what the current value is (on an ongoing basis) so that I could display that value in another DOM Object that converts and displays second in HH:MM:SS format.
Thanks.

Categories