fullcalendar Make more emphasis in BusinessHours - javascript

It is possible to emphasize business hours in fullcalendar by changing the background of these cells so as to make them more visible?

It's not possible to set via js of fullcalendar, just via css.
there are two examples:
Is it possible to do alternating row background colours in FullCalendar?
FullCalendar highlight row
cheers
Edit
There is a solution; Background Events an example:
How to grey out non working day in agendaDay view with arshaw fullcalendar v2.3.0

Related

Calendar and headers go blank when selecting time range

Fullcalendar v4 - when I select a time range in timeGridWeek, the calendar changes appearance. The grid is visible, but the time bar and header disappear, leaving the only feedback as the small time display within the shaded selection range. Everything returns after I release the mouse/touch. Using jQuery 3.5.1 for some Bootstrap v4 elements.
Has anybody encountered this before?
Well, who have believed it? User error! In my css overrides I had given class 'fc-unselectable' a colo(u)r of '#fff' and this was causing not only the headers and time bar, but also any text not within a calendar event to 'disappear'. Naturally I would have tested the effects of this override at the time, so assume that some other change since then had brought about the unwanted behaviour. Now I am wracking my brain to find out why I felt that the white font was necessary in the first place. Must add more detailed comments to my code in future...

ReactJS Ant Design - Use Range Picker as Multi Month View with Single date selection

I have a requirement of implementing Multiple Month View which shows two months calendar side by side exactly like RangePicker but to be able to choose only single date, not a range.
I have made a Sandbox
If anyone has worked on such solution, please help.
Thanks.
I worked on something similar recently. I made an override to the Ant CMS for the range selection blue background. I just kept the styling for the dates that are clicked, and I just kept the two selected dates instead of the entire range.
It's a hack, but it worked fine and I've yet to run into any issues with it.
Set allowEmpty={[false, true]} disabled={[false, true]}
Demo

Javascript Highcharts High buttons and calender with jquery

I am using Highchart / Javascript and I am looking for a way to hide the buttons and calender (see image below) with css or jquery.
How can I do this?
Highcharts do not have date range selector, Highstocks do.
See documentation for rangeSelector, in particular rangeSelector.enabled.

Bootstrap Calendar order of events in week view

I have a high interest in creating my own event calendar/scheduler for my site and found Bootstrap Calendar, it has real potential. I looked at dhtmlxScheduler but its hard to customize the look, it has a lot of nice features though. I have a Fullcalendar now and I like the new Scheduler but I still want a more custom look and some custom functionally.
My JS/Jquery is limited so it makes it difficult to get a real picture of BS-Cal layout and unfortunately there seems to be little documentation other than comments in the code.
So my issue with BS-Cal is the event ordering/stacking in the week view.
The Question - Can the events be reordered in a per day list like the 2nd photo below.
So far - I see the offset class for the columns and the events but the events seem to be wrapped in a "row" div which forces a single "list" for the whole week rather than per day placement order left to right on the table.
Here is what I believe is happening:
This is what I'm hoping to accomplish:

Horizontal day planner/scheduler (drag and drop) with angularJS

I'm looking for a solution that would allow me to make a horizontal drag and drop day scheuler. I have been looking at AngularJS UI-calendar's day view and Telerik Kendo UI Scheduler's day view, but there dosen't seem to be an option to flip it from vertical to horizontal. I want hours to be placed on the x-axis instead of the usual y-axis.
Am I correct in my assumption that neither solution would allow me to accomplish that? If so any suggetion for a workaround/another solution?
Just started looking at this myself. Looking at Telerik Kendo UI Schedule, they have a Timeline view that looks like it will fit a horizontal view.
http://demos.telerik.com/kendo-ui/scheduler/timeline

Categories

Resources