I've checked you can constrain some events to be dragged in a period, or to avoid to move to other periods, but I'm looking a feature to block creation of events just in the business hours defined.
Is it possible to use the "selectable: true" (to be able to create events with clicking in some time and drag to the end, as Google Calendar), but limit to some time spaces ?
If you have a defined set of time when events will always be restricted to (without variations over time) then you can use a combination of the businessHours and selectConstraint settings to enforce this:
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [1, 2, 3, 4], // Monday - Thursday
startTime: '10:00', // a start time (10am in this example)
endTime: '18:00', // an end time (6pm in this example)
},
selectConstraint: "businessHours"
In the above example, "businessHours" will grey-out all the areas of the calendar outside the times defined (in this case Monday to Thursday from 10am to 6pm each day). Setting "selectConstraint" to "businessHours" means that users cannot select to create new events which fall outside the same time range.
Demo: https://codepen.io/ADyson82/pen/aboqPoo
Related
For events that extend past midnight (e.g. from 22:00 to 01:00 / from 10pm to 1am) the calendar entries show a different start/end time depending on whether or not they exceed the current view's date range.
In this Codepen all events have the same start and end time (on different dates) and yet the start/end time is rendered differently in the calendar:
I've experimented with the settings from Docs / Event Display and used
displayEventEnd: true,
eventTimeFormat: {
// Determines the time-text that will be displayed on each event (like 'hh:mm').
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hourCycle: 'h23'
},
for the Codepen, but could not get it to work as desired.
How can I get Fullcalender to consistently show the start time as "22:00" and the end time as "01:00" (independent from the current view's date range)?
Is it possible to define the start and end day of a 'week' in the Keen IO query language? I have a query like:
var query = new Keen.Query("count", {
eventCollection: "add_to_carts",
timeframe: "previous_2_weeks",
interval: "weekly"
});
The default result of my query shows the week starting Sunday and running to Saturday, but I need my data to start on Saturday - is that possible?
What we want to do is find data for the current week and the previous week in one query (using intervals) and separate the two week's results for comparison - with each week running from Saturday to Friday.
It would be possible with absolute timeframes and a custom interval definition, like this:
var query = new Keen.Query("count", {
eventCollection: "add_to_carts",
timeframe: {
start: "2016-08-01",
end: "2016-09-12"
},
timezone: "US/Pacific",
interval: "every_7_days"
});
Instead of using "weekly", it uses a custom interval definition of "every_7_days". This would effectively be one query starting on a Saturday some time in the past, and you would get as many interval results as 7 day blocks from that Saturday - essentially creating previous week and this week in the response.
Here's a fiddle that shows this query and resulting chart.
I've came across something that I thought it was right, but now taking a closer look something is clearly wrong.
I'm on a project of a pill reminder app where someone can set notifications to remind him/her of taking pills in the correct time. There're medicines which a person can take for the rest of his life. And in that case I don't set alerts for years, I set for 3 months max and, when he takes one and mark it as done, I set another alert for 3 months later starting on that date/time.
This app will be released only in Brazil and we have Daylight Saving Time here. When it shifts to DST time the clocks must be adjusted to -1 hour after midnight, when going off DST it gains 1 hour.
For this project I'm using Firebase, Ionic 2, the LocalNotification Plugin and Moment JS.
I have to make a story of the user because other user can see if he's taking it correctly, so I use Moment JS to manipulate the datetime and save the notification and create a node for that user in firebase with UNIX time.
LET'S FINALLY GO TO THE PROBLEM.
When saving a date I check if this date is DST, if it is I add +3 hours to it, if it's not I add +2. I need to add this because when I wrap the isoString in the Moment() function it gives me -3 hours or -2 hours (Haven't searched for this, but I think Moment uses USA time).
This works fine if I'm saving dates inside DST times if I'm in DST time, if in some case I'm not on DST and save a notification for a DST time day it saves with +2 hours.
AN EXAMPLE
The DST time will shift to in DST on October 15. If I need to save 30 notifications, one per day everyday as 12AM, starting at October 1 up to October 30. From day 1 to day 15 the dates will be right, from day 16 to 30 they'll be with +2 hours.
Here's the basic code I use:
// THIS'LL SET MY DATEPICKER TO THE DATE/HOUR I'M IN.
minDate: any = Moment().isDST ? Moment().subtract(3, 'h').toDate().toISOString() : Moment().subtract(2, 'h').toDate().toISOString();
// THIS'LL CONVERT THE SELECTED DATE TO A UNIX TIME IN WICH I'LL USE TO SAVE THE NOTIFICATION AND THE MEDICATION DATA ON FIREBASE
unixConverted = Moment(this.minDate).isDST ? Moment(this.minDate).add(3, 'h').unix() : Moment(this.minDate).add(2, 'h').unix();
What is strange is that using Moment().unix() alone it give me the right time I'm in, if I use Moment(this.minDate).unix() it gives me -2 or -3 hours of the hour I selected.
So if it's in DST (in which I've set my clock to -1 hour) I add 3, if not I add 2.
So how is the proper way to manipulate this DST shift?
Is there a better way to do this than using DST?
Am I right using this logic or is this much more complex than what I think?
Ok so i've found a better way without using .isDST() method.
Simple use Moment().add(Moment().utcOffset(), 'm'), this'll get the current moment time and add the offset in minutes.
The .add() and .subract() methods makes Moment return the UTC time.
The utcOffset() returns a positive or negative number of minutes (representing hours) from UTC, like -60 or 180. So i'll get the correct respecting the time shift.
Worked like a charm for me.
I'm trying to use the Fullcalendar library to create a business hours timetable.
On the backend I could set an event with those params
start (time)
end (time)
day of week (for the day of the week defined)
when (specific day)
This way, I can set periodic events without specifying "when" or "day of week". That's great. The problem is that I want to be overridden in case of a special day, or special day of week is set.
Below you can find what I'm talking about: the id:1 is a periodic events, but must be override on day dow:6 with the id:2, since is defined as specific for that day of the week only. What I'm looking for is the dow:6 (id:2) shows only the event defined for itself, not the periodic ones. Same behaviour for the specific day, setted with "when" on the id:3
events : [
{"id":"1","playingfield_id":"1","dow":null,"when":null,"start":"10:00:00","end":"14:00:00", rendering:"background"},
{"id":"2","playingfield_id":"1","dow":"6","when":null,"start":"14:00:00","end":"15:00:00", rendering:"background"},
{"id":"3","playingfield_id":"1","dow":null,"when":"2015-05-05","start":"15:00:00","end":"16:00:00", rendering:"background"}
]
You can see the code working at in this JSFiddle.
Someone knows if this is possible? At the moment
I'm building an application that records and displays daily events from 5am - 5am.
I'm using Fullcalendar to display these event in a month view. Based on this, I need to display 5am - 5am as belonging to a single day (ex. Monday).
For instance, on Monday I have 3 events:
7am to 11am
1pm to 12:30am (event spans Monday and Tuesday)
1am to 3am (event is effectively on Tuesday; however, I want it to
display on Monday)
Ideally, I'm going to add a parameter, dayStartTime, which is a custom day start time offset maintaining a 24-hour range.
My question is where within the FullCalendar plugin is it that needs to be modified to achieve this result?
try this - http://fullcalendar.io/docs/utilities/Duration/
$('#calendar').fullCalendar({
header: {
center: 'month,agendaFourDay' // buttons for switching between views
},
views: {
agendaFourDay: {
type: 'agenda',
duration: { days: 4 },
buttonText: '4 day'
}
}
});
For duration
"23:59" // hours/minutes
"23:59:59" // hours/minutes/seconds
"1.23:59:59" // days/hours/minutes/seconds
{ days:1, hours:23, minutes:59 } // an object