We Keep Coding

FullCalendar Fortnightly Event

I can get daily sorted by using
daysOfWeek: [2],
I can't find anything in the documentation to make it fortnightly. Is this possible with fullcalendar?
Solution:
For future people, you need the rrule js file loaded otherwise it wont work

try rrule
events: [
{
title: 'work',
rrule: {
freq: 'weekly',
interval: 2,
byweekday: [ 'mo'],
dtstart: '2022-02-01'
}
}
]

FullCalendar React - How to use selectConstraint With Background Events of Display Background & Inverse

How would I go about not allowing users to click on background events that are greyed out in Full Calendar?
For my current calendar, I am trying to display available bookings for a tutoring company and I currently have tutor availabilities and tutor lessons
I am currently able to allow users to not click on greyed out areas from the following array:
let availabilities = [{
groupId: "lesson-available",
daysOfWeek: ["1"],
startTime: "12:00:00",
endTime: "15:00:00",
display: "inverse-background",
color: "#ccc",
},
{
groupId: "lesson-available",
daysOfWeek: ["2"],
startTime: "15:00:00",
endTime: "16:00:00",
display: "inverse-background",
color: "#ccc",
},
];
But I would like to be able to make the following lessons unavailable on the calendar and not be clickable also:
let lessons = [{
groupId: "lesson-unavailable",
start: "2021-01-18T13:00:00",
end: "2021-01-18T14:00:00",
display: "background",
color: "#ccc",
},
{
groupId: "lesson-unavailable",
start: "2021-01-19T15:00:00",
end: "2021-01-19T16:00:00",
display: "background",
color: "#ccc",
}
];
My Code for my Calendar is the following:
<FullCalendar
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
headerToolbar={{
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay",
}}
height="auto"
initialView="timeGridWeek"
editable={true}
eventColor="#6DCBCA"
selectable={true}
selectMirror={true}
dayMaxEvents={true}
allDaySlot={true}
weekends={true}
events={currentEvents}
select={handleDateSelect}
eventContent={renderEventContent}
eventClick={handleEventClick}
eventDrop={handleEventDrop}
eventDragStart={handleEventDragStart}
eventDragStop={handleEventDragStop}
selectConstraint={"lesson-available"}
/>
As you can see, the following constraint of
selectConstraint={"lesson-available"}
is disabling me to click on anything else but the availabilities array which is perfect, but how would I edit this to also incorporate not being able to click on the lessons array (which is displayed as background, not inverse-background)
In my image:
Even though the 3-4pm on the 19th of Jan is greyed out, I am still able to click on it. This is exactly what I need to fix.

You can use the selectOverlap function, in addition to your selectConstraint, to achieve this.
The documentation for selectOverlap says:
...the function will be called once for every time the user’s selection
intersects with an event. If the function returns true, the selection
will be allowed. If false, the selection will not be allowed.
selectOverlap: function(event) {
return !(event.groupId == "lesson-unavailable");
},
Demo: https://codepen.io/ADyson82/pen/ZEpwyqm
Documentation: https://fullcalendar.io/docs/selectOverlap

Block recurring event from rendering when other event exists within same time range in fullcalendar

I have a datasource which has bookings that that i want to render in fullcalendar eg
{
title: 'booked',
groupId: 'unique',
start: '2020-02-11T08:00:00',
end: '2020-02-11T10:00:00',
color: 'blue'
}
However i also have recurring free slots which i want the user to click to eventually make a booking.
{
title: 'Available',
daysOfWeek: [ 1,2,3,4],
startTime: '8:00:00',
endTime: '10:00:00',
color: 'red',
}
The aim is that if there is already a booked event in the same time block , the recurring event 'Available' in this slot will not be displayed
How can i achieve this . I am assuming it is with eventRender
I have a jsfiddle here that shows the events competing for the same time block
https://jsfiddle.net/ryan_ramsumair/mqhzs3v2/5/
Thank you

How to add period selector in AmSerialChart?

I am new to amCharts. Does anyone know how to add period selector in AmSerialChart.
I have tried this:
var periodSelector = new AmCharts.PeriodSelector();
periodSelector.position = "left";
periodSelector.periods = [{
period: "DD",
count: 10,
label: "10 days"
}, {
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}];
chart.periodSelector = periodSelector;
It doesn't create any change.

Period Selector is an exclusive feature of the JavaScript Stock Chart, and is not available in regular serial charts.
There are two ways to go about it:
1) Implement your own external HTML controls to select periods. Then use chart's zoomToDates() method to set specific time range.
OR
2) Switch to Stock Chart and get Period Selector out-of-the-box. Stock Chart can be configured to look exactly like Serial chart. The biggest difference is that you will need to define panels (in your case just one) as well as data sets (again just one).
If you could update your question with the code and data you have so far, I could update mine with a similar Stock Chart.

AngularJS: is $$hashkey a reliable key

Question
I'm interested in the properties of $$hashkey on angular arrays/objects.
Would each generated hashkey be the same each time you reload a
page; a quick test tells me yes but I somewhat assumed it
wouldn't?
If you updated/added to the existing array, would the old hashkey's
stay consistent?
If the above is true, is there a way to fetch from an array using
the hashkey? - of cause I could roll my own but before I recreate the wheel I thought I'd ask.
Example:
Views would include:
form data (example has 1 form)
element data (example has 2 elements)
element options data (example has 2 options per element)
Fetch method:
angular.get($$hashkey);
You would then pass the hashkey of the element and it would return a reference to that array inside the full array.
Lastly the data would be:
{
form_id: 1
form_desc: 'xxx',
form_name: 'name 1',
Elements: [
{
element_id: 1,
element_name: 'element1',
default_value: null,
disabled: "0",
element_type: "image",
ElementOptions: [
{
show: false,
sort_order: 0,
value: "ar",
},
{
show: true,
sort_order: 1,
value: "rw",
}
],
},
{
element_id: 2,
element_name: 'element2',
default_value: null,
disabled: "0",
element_type: "image",
ElementOptions: [
{
show: false,
sort_order: 0,
value: "ar",
},
{
show: true,
sort_order: 1,
value: "rw",
}
],
}
]
}

$$hashkeys will only be computed for functions and objects so if you wish to track anything that isn't one of those types then you have that limitation.
$$Hashkeys look like ...
(function||object): N
...
Where N is just an incremental value being adjusted + 1 for each $$HashKey computed.
So, in many cases this could be the same value across page loads. But loading data that is asynch, will cause differences when multiple data sources are being queried as part of page initialization and order of return cannot be guranteed. In cases like that you would have to marshall all your asynch data and then assign that data to your scope in a specific order to ensure consistent $$hashkeys.
Moving items around in an array that is linked to our DOM (via ng-repeat) will not change that items $$hashkey. Deleting it and re-adding it will.
I would not use $$Hashkey for my own housekeeping as it is intended to be internal to AngularJS.

I've used this internal private property when I had no identifiers.
I think, it's pretty usable, but not recommended.