I am implementing Fullcalendar in my project but i'm stuck in between, what i want is just opposite of business hours for example
in business hours
businessHours:
{
dow: [0, 1, 2, 3, 4, 5, 6, 7 ],
start: '08:00',
end: '09:00' ,
},
when i give this code, then in fullcalendar it beacome like this
it means it show grey field for all hours but 8-9
i want to give a feature where a user can give his time break and then in calendar it will some other color on the particular day and time.
also i thought to fetch the time from db and show as a breakTime but the problem is i can only fetch time and day not date so how can i show in event with only day and time?
any idea how can i achieve it.
I got the answer, for those who want the exact feature just add this code in fullcalendar.js
function F(e) {
var i, r = n.businessHours,
s = {
className: "fc-nonbusiness",
start: "09:00",
end: "17:00",
dow: [1, 2, 3, 4, 5],
rendering: "background"
},
o = I.getView();
return r && (i = t.extend({}, s, "object" == typeof r ? r : {})), i ? (e && (i.start = null, i.end = null), T(E(i), o.start, o.end)) : []
}
and then you can show you breaktime using business hours cheers..!
Providing you have FullCalendar 2.9.1 or later, you can give multiple businessHours definitions. Therefore you can express the day as two (or more) periods of working time, with the break shown in grey in between them. It won't be in a different colour entirely, but it will at least be clear what the working hours are. For example:
businessHours: [
{
dow: [1, 2, 3, 4, 5], // Monday - Friday
start: '09:00',
end: '12:30'
},
{
dow:[1, 2, 3, 4, 5],
start: '13:30',
end: '17:00'
}
]
would imply a one-hour break between 12:30 and 13:30
If you prefer to fetch the time from the DB, I would first ask - what is to stop you adding the date yourself in order to create an event? You can do it either on the server or in the client, it's up to you.
Related
resources: [{
id: 'pending',
title: 'Pending'
},
{
id: 'delivery',
title: 'Delivery Person'
}
],
events: [{
start: '10:00',
end: '14:00',
id: "22218",
daysOfWeek: [0, 1, 2, 3, 4, 5, 6],
resourceId: "pending"
},
{
startTime: "2022-10-19 14:00:00",
endTime: "2022-10-20 16:00:00",
id: "22219",
resourceId: "delivery"
}
]
In fullcalender v4 I'm having resources and events object like this.
What I want is, to repeat the pending order for every day on the given timeslot.
Could someone please help me with this?
From what I can see you seem to have got a bit confused with when you need the startTime/endTime or start/end properties, which are used for recurring and non-recurring events (respectively).
Your "pending" event, if you want it to recur, needs to use startTime and endTime as per the recurring events documentation, providing the values as times/durations. You can also, optionally, specify startRecur and endRecur to set the dates between which the recurrence will apply.
Your "delivery" event doesn't recur, but it also doesn't show up at all because you've used startTime and endTime as if it was recurring. Non-recurring events need start and end properties - again as per the event parsing documentation.
I think this is probably close to what you were intending. It wasn't clear when exactly you want the recurrence to start and end so I omitted that - you can easily add it:
events: [
{
startTime: "10:00",
endTime: "14:00",
id: "22218",
daysOfWeek: [0, 1, 2, 3, 4, 5, 6],
resourceId: "pending"
},
{
start: "2022-10-19 14:00:00",
end: "2022-10-20 16:00:00",
id: "22219",
resourceId: "delivery"
}
]
Demos:
Initial version using your code: https://codepen.io/ADyson82/pen/NWMZavP
Fixed version using my changes: https://codepen.io/ADyson82/pen/VwxJrLJ
I have an Array of objects & each object has a 'start' date & an 'end' date.
sortedDateRanges = [
{
id: 1,
start: "2018-01-01",
end: "2018-01-05",
name: "First item"
},
{
id: 2,
start: "2018-01-02",
end: "2018-01-08",
name: "Second item"
},
{
id: 3,
start: "2018-01-06",
end: "2018-01-13",
name: "Third item"
},
{
id: 4,
start: "2018-01-14",
end: "2018-01-14",
name: "Fourth item"
},
{
id: 5,
start: "2018-02-01",
end: "2018-02-15",
name: "Fifth item"
},
]
I need to sort these objects into groups where each group has NO overlapping date ranges. There are definitely multiple valid outputs. [[{id: 1},{id: 3},{id: 4}], [{id: 2},{id: 5}]] or [[{id: 1}, {id: 3}, {id: 5}], [{id: 2}, {id: 4}]] etc.
My current solution is just comparing each range to the previous range which doesn't produce an incorrect solution...it's just not a comprehensive solution like I am looking for. My current solution returns [[{id: 1}],[{id: 2}],[{id: 3}, {id: 4}, {id: 5}]]
export const groupUnoverlappedItems = sortedDateRanges => {
let groups = [];
let rangeIds = [];
sortedDateRanges.map((current, idx, arr) => {
if (idx === 0) {
groups.push([current]);
rangeIds.push(current.id);
// return result;
} else {
let previous = arr[idx -1];
// check for overlap
let previousEnd = (new Date(previous.end)).getTime();
let currentStart = (new Date(current.start)).getTime();
let overlap = (previousEnd >= currentStart);
if (overlap) {
// if overlap, push new group
groups.push([current]);
rangeIds.push(current.id);
} else if (rangeIds.indexOf(current.id) === -1) {
groups[groups.length -1].push(current);
rangeIds.push(current.id);
}
}
});
return groups;
};
I don't understand if you have a rule to define the groups, or they must be formed dinamically.
Anyway, why don't you get the object with the earliest start date, and use it to create the first object, in the first group.
You have a starting point, then you can find the object with the nearest start date, that doesn't overlap your first object end date. If you proceed sequentially, once you find a date that overlaps, you can be almost safe that is the good one to form the next group.
Once you don't find any other candidates for the first group, then you can check if another group exist (and has at least an object in it), then repeat the process, until all objects are allocated.
May I suggest to use a library, like date-fns, that helps you with useful methods to manipulate dates, and also define date intervals. Javascript has basic support for dates, using a library can save you a lot of time ;)
How do I query my documents by specific date and time range? Ie. I want to query documents by specific date range (01-01-2019 - 31-01-2019) and from those dates only the documents which are made in 10am to 12pm.
It would go something like this:
let ref = db.collection('events')
// Query by date range
ref = ref
.where('created', '>=', new Date(2019, 1, 1, 10, 0, 0, 0))
.where('created', '<=', new Date(2019, 1, 1, 12, 0, 0, 0))
// Query by time range in each date
ref = ref
.where('created', '>=', *START TIME = 10pm*)
.where('created', '<=', *END TIME = 12pm*)
So the question is how do I filter hours and minutes every day I queried? Hopefully you understand what I'm asking here! I'll update the question if needed.
Update
Database sturcture is following
/events/{single event document}:
{
cafeId: String,
created: Firestore timestamp // ex. February 2, 2019 at 10:16:00 AM UTC+2
discount: Number,
eventId: Number,
productCount: Number,
keywords: Array,
products: Map,
payment: Map,
returned: Number,
total: Number
}
And when I get this in the client created will transform to:
{ _seconds: Number, _nanoseconds: 0 }
If you want to use "standard" where() methods, you'll probably have to do the second filtering on your front end, from the results received with
ref = ref
.where('created', '>=', new Date(2019, 1, 1, 10, 0, 0, 0))
.where('created', '<=', new Date(2019, 3, 1, 12, 0, 0, 0))
Another approach would be to store, in an extra field (e.g. createdText), your date/time value with a custom format, like for example YYYYMMDDHHMM, with a 24 hours format for the hours (i.e. HH).
This way the document will be correctly sorted and you can query with only one where, as follows:
ref = ref
.where('createdText', '>=', '201902031000')
.where('createdText', '<=', '201902041200')
It is quite common to duplicate the data in an NoSQL database, in particular to allow querying according to your business needs.
Following is the working code - http://plnkr.co/edit/6lRhiTd1BrKRdThY0WNB?p=preview
In this if you select the number from drop down and fill data then click and check console you will see the result like -
[
Object { start_time="12Start", end_time="12END"},
Object { start_time="34start", end_time="786"},
Object { start_time="123", end_time="5656"},
Object { start_time="098", end_time="77"},
Object { start_time="75757", end_time="57567"}
]
Now If you check, there are two arrays - $scope.shiftstart | $scope.shiftend
I am looping through these but one problem with this approach is that-
1) It needs to be dependent on the equal length of arrays.
2) If some one leaves the first end time input field then it comes as undefined in the console.
What I am thinking is to not to use - separate ng-model="shiftstart[shiftnumber]" & ng-model="shiftend[shiftnumber]" instead I could use ONE single array containing multiple objects but I am unable to integrate the solution, let me know what I can amend in my code to make that happen.
Provided I do understand your question correctly, I think you're way overcomplicating stuff. If you simple want to:
a) have a list of shifts, from which one can be selected, and
b) be able to edit that selected shift
then the following is all you need:
ctrl:
$scope.shifts = [
{ nr: 1, start_time: "12Start", end_time: "12END" },
{ nr: 2, start_time: "34start", end_time: "786" },
{ nr: 3, start_time: "123", end_time: "5656" },
{ nr: 4, start_time: "098", end_time: "77" },
{ nr: 5, start_time: "75757", end_time: "57567" }
];
$scope.active = null;
view-demo:
<h3>Select a shift</h3>
<select
data-ng-model="active"
data-ng-options="shift as shift.nr for shift in shifts"
></select>
<div data-ng-show="active">
<h3>Edit start/end</h3>
start time <input data-ng-model="active.start_time"><br>
snd time <input data-ng-model="active.end_time">
</div>
demo: http://jsbin.com/fibilalaciha/1/
I have a little web app. And I use a calender(code from here FullCalendar) there inside a .jsp file.
I use Spring mvc architecture. So when this page loaded a controller which is responsible for this page loading will add an attribute called calendarEventList to the model.
'calendarEventList' is an ArrayList<calObject>. calObject is a class which contain the details about the even.
I can access those details in the jsp by ${calEvent.eventID} where calEvent is an Object from that ArrayList.
In FullCalendar the event load can be called like below
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09 12:30:00',
allDay : false // will make the time show
}
]
});
I want is like below
$('#calendar').fullCalendar({
events: //read the `calendarEventList` and create a suitable array
});
I have title ,start ,end .. details in a Oblect of the calendarEventList.
So I want to create the list which I need to give to the fullcalendar. How can I create such a kind of array in JS.
It's structure should match [{},{},{},...,{},{}] as given in the example. {} includes a detail about one Object in that calendarEventList ArrayList.
any detailed description will be highly appreciated.
If i truly understand your question ( you have array of objects, all objects contains different field, but each object contains title, start (and end)). So your task is filter this array.
Solution:
function factory(array){
return array.map(function(item){
var instance = {title: item.title, start: item.start};
if(item.end) instance.end = item.end;
return item;
});
}
var res = factory([{ item: 1, title: 2, start: 4, an: 123, pp: "asdf"}, { item: 2, title: 2, start: 4, end: 5}, { item: 3, title: 2, start: 4}]);
Output will be filtered array of objects with start, title, (end) fields;
Try demo
Let try with my example:
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var employees = [];
employees.push({ id: 111, title: "Testing Event 001", start: new Date(y, m, d-5,10,30) , end: new Date(y, m, d-5,12,30),className: ['yellow-event', 'black-text-event']});
employees.push({ id: 111, title: "Testing Event 002", start: new Date(y, m, d-3,10,30) , end: new Date(y, m, d-3,12,30),className: ['yellow-event', 'black-text-event']});
on events: employees put like this,,
Hope it help full. thanks you..