So I'm using FullCalendar v4 library for reservation system, and I need to override DayHeader while using day-mode (timeGridDay or timeGridWeek with duration set to {days: 1}). Basically I have this sketch:
I want to get day-mode system (as I told) with week-based DayHeader (because I use days labels in my JavaScript code for day switching). I want just to display single day in calendar, with preserving header (header that displays 7 days).
I was trying to override header to duration: {days: 7}, copy header using jQuery .html() method, and then change duration to {days: 1} and paste header using .html() on the same div. But changing duration using method from GitHub destroy cells style alignment, so it does not display nicely as you were using duration: {days: 1} on Calendar init.
What can I do? Thanks in advance for solutions.
#EDIT:
I want to mention that the answer how to restyle FullCalendar (set automatically width for DayHeader cells (labels)) after changing durations is also adequate for me and fits into my wished solution - so if you have something in mind, tell me.
So, I resolved my problem by using this code:
if(view.viewSpec.type === 'customDayGrid'){
let views = calendar.getOption('views');
views.customDayGrid.duration.days = 1;
calendar.setOption('views', views);
}
setTimeout(() => {
$(headerSel).html(getHeaderHTML);
calendar.updateSize();
}, 100)
I wish I didn't used setTimeout but I don't know how to resolve it different way - but it works, so I think it closes my issue.
Related
I'm developing an app for my school, like a scheduler but for timtable for teachers. I want something like this:
I'm using React for my app and FullCalendar component. I have this component configured like this:
<FullCalendar
weekends={false}
editable
droppable
selectable
events={events}
ref={calendarRef}
rerenderDelay={10}
initialDate={date}
initialView={view}
dayMaxEventRows={30}
eventDisplay="block"
headerToolbar={false}
allDayMaintainDuration
eventResizableFromStart
select={handleSelectRange}
eventDrop={handleDropEvent}
eventClick={handleSelectEvent}
eventResize={handleResizeEvent}
height={isDesktop ? 720 : 'auto'}
plugins={[listPlugin, dayGridPlugin, timelinePlugin, timeGridPlugin, interactionPlugin]}
slotMinTime="8:00:00"
slotMaxTime="19:00:00"
displayEventTime={false}
/>
But I don't know if I can remove hours first columns and make every event as a separated component with an arrow for expand. I need to write on every event some text (sometimes is a long text), and every week have its own text. All data saved to mongo database, ofcourse.
For now my component looks like this:
You know if there are any method or propierty for make events stacked without time duration, and fit to content title and then expand it?
I'm not fixed on FullCalendar Component, I can use some other component if it do what I need, but I need to save every week separated.
Thanks in advance.
For this you can use the "DayGrid" view in fullCalendar.
It's mentioned here in the documentation and there's a live demo available there too to show you what it looks like.
With another minor tweak to the eventDisplay setting it starts to look similar to your screenshot.
Something like this:
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: "dayGridWeek",
eventDisplay: "block",
headerToolbar: {
left: "prev,next today",
center: "title",
right: "dayGridWeek,timeGridWeek"
},
...etc. Demo: https://codepen.io/ADyson82/pen/KKRqaJe
Of course if you wish you can then add your own further customisations to change the appearance of the events using fullCalendar's event render hooks.
P.S. I'm not a React user so my demo uses vanilla JS but you can get exactly the same result via React syntax.
I am currently using a range slider and am stuck as I cannot easily clear/update the previous values filters. This is the code that takes in values from the slider and set the filters on the table.
function priceFilter(values){
table.setFilter([
{field:"price",type:">=", value: values[0]},
{field:"price",type:"<=", value: values[1]},
]);
}
function gallonFilter(values){
table.setFilter([
{field:"gallons",type:">=", value: values[0]},
{field:"gallons",type:"<=", value: values[1]},
]);
}
Here is a JSfiddle of what I currently have that does not work as intended. This is due to setFilter wiping all previous filters. So only one slider is working at a time.
Here is one "solution" I have found that does the correct behavior, but looks awkward as the table reloads twice on a slide (once starting, once ending). This works by removing the previous filter at the start of the slide, then adding new filters at the end.
How can I update the values in these filters that does not cause the table to reload, or at least make it not as visible?
The setFilter function is designed to replace all existing filters. If you simply want to add another filter to existing filters then you should us the addFilter function
table.addFilter("age", ">", 22);
Full details on how to manipulate filters can be found in the Filter Management Documentation
I already have start and end time for an external event but is there any correct way to set the end time on highlight (gray background) of the same external event.
Or if there is no way to set the end time on highlight then can we remove the fc-highlight completely from external/draggable events.
By the way, I already asked this question but didn't get correct response, so that's why I'm asking again
For more detail, please visit my another question here: Disable highlight of an external event in fullcalendar
Starting from your CodePen...
I managed to customise the draggable event in order to have a defined duration to be used as time calculation.
I added data-duration-hour and data-duration-minute attributes to the draggable event.
Those "data" attributes ares used to determine the ending time of the event, on drop.
NOW about the hightlight which occurs on drag (before drop) in the calendar...
It still hightlights 2 hours.
You'll have to to look at a function to add on drag in fullCalendar options.
I have no idea for the moment.
So... I may not have answered the right question (about the hightlight effect on drag).
But this is still an improvement for your project.
See in this CodePen
HTML modified:
<div class='fc-event' data-duration-hour="3" data-duration-minute="30">My Event 1</div>
JS modified:
function external_event_dropped(date, external_event) {
var event_object;
var copied_event_object;
var tempDate = new Date(date);
event_object = $(external_event).data('eventObject');
copied_event_object = $.extend({}, event_object);
copied_event_object.start = date;
// This is the dropped date object
console.log(date);
// This is the drop time in clear.
console.log( "dropped at: "+date.hour()+":"+date.minute() );
// Retreive the data-duration from the dragged element.
var durationHour = parseInt(external_event.data("duration-hour"));
var durationMinute = parseInt(external_event.data("duration-minute"));
console.log("DATA: "+durationHour+":"+durationMinute);
// Clone the time object to modify it in order to create de end time.
var dateEnd = date.clone();
dateEnd = dateEnd.hour(dateEnd.hour()+durationHour);
dateEnd = dateEnd.minute(dateEnd.minute()+durationMinute);
// This is the end time object.
console.log(dateEnd);
// This is the drop end time in clear.
console.log( "dropped at: "+dateEnd.hour()+":"+dateEnd.minute() );
// Now set it to the FullCalendar object.
copied_event_object.end = dateEnd;
copied_event_object.allDay = false;
copied_event_object.title = 'ADEEL';
external_event.remove();
$('#exampleCalendar').fullCalendar('renderEvent', copied_event_object, true);
}
For the complete solution check this out: Fullcalendar
External/Draggable Events Highlight
Effect
Well after reading the fullcalendar documentation and spent a lot of time on this issue, I come up with a solution and I hope it might help others as well.
So, the solution is:
I've added an option defaultTimedEventDuration which is a default duration of an external/draggable event, if there is no duration set on event.
e.g: defaultTimedEventDuration: '01:00:00'
Also added data-duration in html to get dynamic duration and highlighted effect.
e.g: <div class='fc-event' data-duration='03:00'>My Event 1</div>
N.B: Also possibility to set duration attribute in js data
I have downloaded and tried the jQuery DatetimePicker control from http://plugins.jquery.com/datetimepicker/. This is v2.3.7.
And in the download there is an image attached here which shows the selectors on both hours and minutes. But I haven't been able to find anything in the documentation on how to achieve that. Could someone please point out how to achieve this?
$('#' + subgridid_complete).datetimepicker({
format: 'mm/dd/yy H:i',//'d.m.Y H:i',
//inline: true
mask:true,
});
This is what I get using the code above. Notice that the Hour and minute are not independently selectable.
Many thanks
No example on the page shows a freely choosable time. You can use 'step' to specify for example a 15 minute step in the time scroll-bar.
You can also switch to the trentrichardson.com/examples/timepicker (a jquery-ui-addon). Here, the Time can be chosen, like in that example: trentrichardson.com/examples/timepicker
If you want 15 minute intervals try:
step: 15,
From the documentation >> For time only
jQuery('#datetimepicker5').datetimepicker({
datepicker:false,
allowTimes:[
'12:00', '13:00', '15:00',
'17:00', '17:05', '17:20', '19:00', '20:00'
]
});
For datepicker with date and time use:
jQuery('#datetimepicker4').datetimepicker({
format:'d.m.Y H:i'
});
datetimepicker4 and datetimepicker5 are textbox id on which you want to open calendar
Have you seen this? http://xdsoft.net/jqplugins/datetimepicker/
This contains few examples on how to use the datetimepicker, and also use moment.js with this.
I tried that before, too. No example on the documenation page shows a freely choosable time.
So I switched to jquerUI-timepicker. Here, the Time can be freely chosen. Many examples are provided.
I am facing problem in using the domquery, to get focus on the control previous to grid when the grid cell is in edit mode, What i am trying is
1.check the grid tabindex add 1 to it, gridTabIndex = grid.dom.tabindex - 1
2.do grid.up() to look out for main form ,
3.then search using domquery form.query('input[tabindex = gridTabIndex]') for the field with the tabindex = grid.tabindex - 1
using grid.up().query() gives the below output as shown in image
So the point 3 is where i am facing problem. it gives an empty array // output is []
Any kind of help is appreciated.
form.query doesn't query Dom Elements. It queries ExtJs Components. However form.getEl().query do query for Dom Elements. Give it a try. (Notice, Ext.dom.Element.query is available only since 4.1.0)