I am trying on this demo in jsbin to have some events with scheduler and restrict to move some of them to specific resources.
$('#calendar').fullCalendar({
schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
// put your options and callbacks here
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,agendaDay'
},
defaultView: 'agendaDay',
defaultDate: '2017-05-09',
navLinks: true, // can click day/week names to navigate views
editable: true,
nowIndicator: true,
allDaySlot: false,
fixedWeekCount: false,
eventLimit: true, // allow "more" link when too many events
slotLabelFormat: "HH:mm",
slotLabelInterval: "00:60:00",
events: [
{
title: 'Long Event',
start: '2017-05-09T16:00:00',
end: '2017-05-09T17:00:00',
resourceId: 'b',
constraint: {
resourceIds: ['c', 'd']
}
},
{
id: 999,
title: 'Test Event',
start: '2017-05-09T16:00:00',
end: '2017-05-09T18:00:00',
resourceId: 'a',
constraint: {
resourceIds: ['b', 'c', 'd']
}
}
],
resources: [
{id: 'a', title: 'Auditorium A'},
{id: 'b', title: 'Auditorium B'},
{id: 'c', title: 'Auditorium C'},
{id: 'd', title: 'Auditorium D'}
]
})
Now If you follow the instructions here you will notice that inside the resourcesIds you specify the ids that you want the event NOT to go. But in the jsbin you can see that the reverse is happening.
Also if you switch on the month or week view you cannot drag and drop from one day to the other. Is restricting you due to the eventConstraint.
I am doing something wrong or is this something faulty?
Got around the problem with this solution for the moment but i think that the above is a bug. You can try my solution here.
What i did is to pass the constraints in a custom field on the event and to check on the drop if its correct.
Now If you follow the instructions here you will notice that inside
the resourcesIds you specify the ids that you want the event NOT to
go.
No, the article says precisely the opposite of that:
Additional properties can be applied to force an event to stay within
specific resources
(I added the bold.)
This means you give a list of the resources that the event can be dragged to. It cannot therefore be dragged to any resources not named within the constraint property.
As per the example given in the link you posted:
constraint: {
resourceIds: [ 'a', 'b', 'c' ] // constrain dragging to these
}
The event with this property will only be allowed to be dragged onto resources 'a', 'b', and 'c'.
I think you have mis-understood the documentation.
Related
I am using FullCalendar 5 and JSON to populate the events:
id;
title;
daysOfWeek;
startRecur;
endRecur;
startTime;
endTime;
backgroundColor;
I have a series of Events with a start and end date. When I click on an Event the end date is showing as the date cell the Event occurrence is in. I want to retrieve the end date of the series of Events. I am using info.event.end.
This is the code:
eventClick: function(info) {
var eventObj = info.event;
$('#updateDescription').val(eventObj.title);
$('#updateStartDate').val(moment(eventObj.start).format('DD/MM/YYYY'));
$('#updateEndDate').val(moment(eventObj.end).format('DD/MM/YYYY')); //Shows as 29/11/2021 should be 01/12/2021
$('#updateStartTime').val(moment(eventObj.start).format('HH:mm'));
$('#updateEndTime').val(moment(eventObj.end).format('HH:mm'));
$('#updateColour').val(eventObj.backgroundColor);
$('#ecClickModal').modal('show');
},
id: '001,
title: 'Event A',
daysOfWeek: '[1, 4]',
startRecur: '2021-01-01',
endRecur: '2022-12-30',
startTime: '10:00',
endTime: '11:00',
backgroundColor: 'Red',
id: '002,
title: 'Event B',
daysOfWeek: '[2, 3]',
startRecur: '2021-05-01',
endRecur: '2023-05-30',
startTime: '09:00',
endTime: '10:00',
backgroundColor: 'Blue',
id: '003,
title: 'Event C',
daysOfWeek: '[5]',
startRecur: '2020-01-01',
endRecur: null,
startTime: '10:00',
endTime: '11:00',
backgroundColor: 'Green',
When I click on 'Event B' I want to get the end date '2023-05-30'.
Currently, if I click on the occurrence of 'Event B' on '30/11/2021' then:
info.event.start is 30/11/2021
info.event.end is 30/11/2021
Recurring Events do not need an end date. So the solution must be able to cater for 'Event C' (i.e., a null end date please).
Currently there are no in built functions in FullCalendar to fetch the last date from a series of events. You will have to fetch all events using calendar::getEvents and then find the end date of the last event.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
{
id: 'a',
title: 'my event a',
start: '2021-11-01',
end: '2021-11-02'
},
{
id: 'b',
title: 'my event b',
start: '2021-11-03',
end: '2021-11-04'
},
{
id: 'c',
title: 'my event c ',
start: '2021-11-05',
end: '2021-11-06'
},
{
id: 'd',
title: 'my event d',
start: '2021-11-07',
end: '2021-11-08'
},
],
});
calendar.render();
// Fetching all events
const allEvents = calendar.getEvents();
// Sorting the events based on the last date (descending)
allEvents.sort((eventA, eventB)=> {
return eventB.end-eventA.end;
});
const lastDate = allEvents[0].end;
});
info.event.end only gives you the end date of a single event.
Also, before I stumble into it, how do I manage a null end date please?
Could you please explain the issue?
I have a project in hands that requires me to use the resources premium function from fullcalendar. I need to use the dayRender option to create a div in each day for css customization, however it seems the dayRender is not even called (I used a debugger on the function to test it) when the view is as resourceTimelineWeek. If I use the view timeGridWeek it works just fine.
I will leave here the json options I'm working with, but what I'd like to know is if there is another option I can use instead of dayRender for resources in particular.
I've tried resourcesRender, it works for the resource part of the table only. I've tried some of the slot render hooks as well without success.
header: {
left: 'today prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
defaultView: 'resourceTimelineWeek',
firstDay: 1,
slotDuration: {day: 1},
minTime: '10:00:00',
maxTime: '18:00:00',
editable: true,
dayRender: function (args) {
debugger;
args.el.innerHtml = 'daeda';
},
resourceRender: function(renderInfo) {
/*renderInfo.el.style.backgroundColor = 'blue';*/
},
resources: [
{ id: 'abc', building: '460 Bryant', title: 'Auditorium A' },
{ id: 'b', building: '460 Bryant', title: 'Auditorium B' },
{ id: 'c', building: '460 Bryant', title: 'Auditorium C' }
]
Thank you in advance
I have downloaded and been experimenting with FullCalendar and it does almost everything I need for a resource scheduling app I am developing for my company's use. I just need to try and get it to display the events a bit differently and was hoping someone might be able to help.
I currently have it configured to display like this:
However, I am ultimately need it to display like this (side by side):
This is for a sequential process and it is important to convey the order of events and if one event (blue) extends into another day then the next day's event(s) (purple) have to wait until that one is done. This is not as clear in the top image as the bottom one.
Is this something that can be configured or will this require me to modify the source or intercept the event render and manipulate it there?
Thanks!
[EDIT] Added code snippets:
TEMPLATE:
<FullCalendar ref="fullCalendar"
default-view="resourceTimelineMonth"
:plugins="calendarPlugins"
:events="calEvents"
:resources="calResources"
:weekends="true"
:editable="true"
:event-overlap="false"
:slot-width="100"/>
SCRIPT:
data () {
return {
...
calendarPlugins: [ interactionPlugin, resourceTimelinePlugin ],
calEvents: [
{ resourceId: "101", title: 'WO123', start: '2019-11-01T07:00:00', end: '2019-11-01T12:00:00', backgroundColor: 'red' },
{ resourceId: "101", title: 'WO127', start: '2019-11-01T12:00:00', end: '2019-11-01T18:00:00', backgroundColor: 'green' },
{ resourceId: "101", title: 'WO144', start: '2019-11-01T18:00:00', end: '2019-11-02T03:00:00', backgroundColor: 'blue' },
{ resourceId: "101", title: 'WO145', start: '2019-11-02T03:00:00', end: '2019-11-02T10:00:00', backgroundColor: 'purple' }
],
calResources: [
{id: "101", title: "KM101"},
{id: "102", title: "KM102"},
{id: "103", title: "KM103"},
{id: "104", title: "KM104"},
{id: "105", title: "KM105"},
],
...
}
As I hinted at in the comments above, the reason you don't see what you're hoping for is because when you compress each slot to a single day, fullCalendar appears to switch to an "all-day" mode of display, where it ceases to take the specific times of day into account, and simply indicates the day(s) in which the event occurs.
The way to get a display the way (or close to the way) you want is to reduce the slot duration to half a day (which clearly creates the least division of the day you can do), and also modify the slot labels slightly to suit. Once the slot duration involves hours, fullCalendar will start taking the time component of the event into account again when it renders.
I don't know vue.js syntax and can't make a demo of it, so I've done the code and demo below in vanilla JS, but hopefully you can translate that into the syntax used by the vue plugin without any difficulty.
Options to add to your calendar config:
slotDuration: { hours: 12 },
slotLabelFormat: [
{ weekday: "short" },
{ hour: "2-digit", },
],
Live demo: https://codepen.io/ADyson82/pen/VwwXowr
See https://fullcalendar.io/docs/date-display for relevant documentation.
Does anyone know how to make the nested headers plugin for Handsontable collapse a specific set of columns by default (i.e. when the table initially loads up)?
Specifically I have the following appearing:
And I would like the following to appear:
Here is my current code:
var hot = new Handsontable(container, {
data: Handsontable.helper.createSpreadsheetData(8, 8)
, rowHeaders: true
, colHeaders: true
, columnSorting: true
, hiddenColumns: true
, afterRender: function () {
console.log("render");
}
, nestedHeaders: [
['Key', {label: 'Design Data', colspan: 7}]
, ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
]
, collapsibleColumns: [
{row: -2, col: 1, collapsible: true}
]
});
I have created a fiddle showing this below.
https://jsfiddle.net/JoshAdams/4bcgdfxL/
var plugincollaps = hot.getPlugin'collapsibleColumns');
plugincollaps.collapseAll();
I am trying to interact with a javascript api (bare in mind I have never done this before). An example of what I am attempting to work with is here:
SearchSpring.Catalog.init({
leaveInitialResults : true,
facets : '.leftNav',
results : '#results',
result_layout: 'list',
results_per_page : 12,
layout: 'top',
loadCSS: false,
filters: {
color: ['Blue']
},
backgroundFilters: {
category: ['Shirt', 'Shoes'],
department: ['Mens']
},
maxFacets: 5,
maxFacetOptions: 10,
sortText: 'Sort By ',
sortType: 'dropdown',
filterText: 'Refine Search Results',
previousText: 'Previous',
scrollType: 'scroll',
scrollTo: 'body',
backgroundSortField: 'price',
backgroundSortDir: 'desc',
compareText: 'Compare Items',
summaryText: 'Current Filters',
showSummary: true,
subSearchText: 'Subsearch:',
showSubSearch: true,
forwardSingle: false,
afterResultsChange: function() { $('.pagination').hide(); },
filterData: function(data) { console.debug(data); }
});
In the example I want to add a "backgroundFilter" to this with a value:
var cat="MyNewCategory";
cat.value="ANewValue;
How would I add this category and value to the backgroundFilters: listed above?
This is a very common framework initialization pattern when working with frameworks.
Your example code is passing a JavaScript Object {} as a parameter into a function () that is called init.
Taking out all definitions the pattern looks like this:
SomeFramework.frameworkFunction({});
In the above code the {} is an empty object used for initialization. There are two ways that you can work with that object in practice.
Regarding your first code snippet, you can add code into that 'object literal'.
backgroundFilters: {
category: ['Shirt', 'Shoes'],
department: ['Mens'],
cat: ['My value']
},
Notice the added comma, this is an important tripping point. This may or may not fit your needs, depending on a few factors.
Regarding your second code snippet, you can apply members to JavaScript objects at runtime. What I mean is, your var cat can be added to the anonymous object-literal that is being passed in. Hard to say, but a simple concept. Here is how:
//Say this is initialized in some separate way. //There is a bug here I'll describe later.
var cat="MyNewCategory";
cat.value="ANewValue";
//Extract and name the initialization object. It is verbatim at this point.
var initObject = {
leaveInitialResults : true,
facets : '.leftNav',
results : '#results',
result_layout: 'list',
results_per_page : 12,
layout: 'top',
loadCSS: false,
filters: {
color: ['Blue']
},
backgroundFilters: {
category: ['Shirt', 'Shoes'],
department: ['Mens']
},
maxFacets: 5,
maxFacetOptions: 10,
sortText: 'Sort By ',
sortType: 'dropdown',
filterText: 'Refine Search Results',
previousText: 'Previous',
scrollType: 'scroll',
scrollTo: 'body',
backgroundSortField: 'price',
backgroundSortDir: 'desc',
compareText: 'Compare Items',
summaryText: 'Current Filters',
showSummary: true,
subSearchText: 'Subsearch:',
showSubSearch: true,
forwardSingle: false,
afterResultsChange: function() { $('.pagination').hide(); },
filterData: function(data) { console.debug(data); }
};
//Now we can add variables (and functions) dynamically at runtime.
initObject.cat = cat;
//And pass them into the framework initialization in a separated way.
SearchSpring.Catalog.init(initObject);
Now for the bug. I don't know the solution because I do not know what it is intended to do, but I can point out what is potentially incorrect.
var cat="MyNewCategory";
cat.value="ANewValue;
This code is: 1 creating a String Object called cat. 2 changing the value to a new string.
I do not think this is what you really want.
To add a new backgroundFilter, in the separated way above, it would be:
initObject.backgroundFilters.cat = ['A', 'B'];
//Line above would give you this type of definition within the initObject (at runtime):
backgroundFilters: {
category: ['Shirt', 'Shoes'],
department: ['Mens'],
cat: ['A','B']
},
For this to work it will depend on what the framework is expecting regarding backgroundFilters.
Hope that helps.
All the best!
Nash
I don't quite understand - do you want to have the backgroundFilters categories as structured objects rather than plain strings? If you are in control of the entire API, you can do something like
...
backgroundFilters: {
category: [
new SearchSpring.Catalog.Category("Shirt"),
new SearchSpring.Catalog.Category("Shoes"),
new SearchSpring.Catalog.Category("MyNewCategory", "ANewValue")
],
department: 'Mens'
}
...