I am developing an application with ionic , in which I need the user to program the hours and days in which must reach a reminder.
I am using the plugin Cordova local notifications , as I can create a notification for example be repeated every Monday or the day that the user place ?
I’m around trying to do this but does not work
var date = new Date();
date.setDate(date.getDate());
date.setHours(15);
date.setMinutes(0);
date.setSeconds(0);
cordova.plugins.localNotifications.schedule({
id: 1,
title: 'Daily Training Reminder',
at: date,
every: 'Monday'
});
Can anyone help!!
this.localNotification.schedule({
"id": Math.floor((Math.random() * 1000)),
'title': 'Some Title',
'trigger': {
'every': {
'weekday': 1,
'hour': 10,
'minute': 40
},
'count': 1
}
});
Also i have used Ionic LocalNotificaiton
here hour is 24-hour based minute is minute count is count of notification
so it will receive a notification on Monday at 10:40
weekday:1 (Monday)
weekday:2 (Tuesday)...
The ionic wrapper is outdated and doesn't work so use the cordova plugin and then do something like
declare let cordova: any; //above export class
cordova.plugins.notification.local.schedule({
title: "title",
text: "body",
trigger: { at: new Date(),every: 'day', count: 1 }
});
Related
I am trying to use the Easepick (https://easepick.com/) datepicker to create a holiday booking system.
As the working week is Monday to Friday i need to block out Saturdays and Sundays which i have managed to do.
The next issue i am working with is i need people to be able to book over the course of more than 1 week but not go above there holiday allowance so for example if someone has 5 days remaining and wants to book between Wednesday and the following tuesday they should be able to.
var maxdays = 5
const picker = new easepick.create({
element: "#datepicker",
css: [
"https://cdn.jsdelivr.net/npm/#easepick/bundle#1.1.6/dist/index.css"
],
zIndex: 10,
AmpPlugin: {
dropdown: {
months: true,
years: true,
minYear: 2021
}
},
LockPlugin: {
maxDays: maxdays,
filter(date, picked) {
return [0, 6].includes(date.getDay());
}
},
plugins: [
"AmpPlugin",
"RangePlugin",
"LockPlugin"
],
})
This is what i have so far: https://jsfiddle.net/nzLcktv4/
what can i do?
My goal is to have 2 custom buttons to jump 1 week back and forth and another 2 buttons to jump 1 month back and forth. In contrary to the build-in prev and next buttons of FullCalendar, my buttons are supposed not to change with the duration of the view. I am stuck with the syntax here, calendar.incrementDate( moment.duration(-1, 'week') ) brings up Uncaught TypeError: e is null in browser. moment.js seems to work fine though. My code:
(...)
customButtons: {
prevWeek: {
text: '<',
click: function() {
calendar.changeView( 'resourceTimelineWeek' ), //works
calendar.incrementDate( moment.duration(-1, 'week') ), //error
alert('clicked the prevWeek button!');
}
}
},
headerToolbar: {
center: 'week,month',
right: 'today prevMonth,prevWeek,nextWeek,nextMonth'
},
slotLabelFormat: [
{ month: 'long', year: 'numeric' }, // top level of text
{ week: 'W' },
{ weekday: 'short', day: '2-digit' } // lower level of text
],
(...)
...and two more questions:
Is there a way not to use moment.js for this?
What is the best way to change the font size / add some custom CSS for a certain custom button (not for all buttons)?
With the hint from ADyson I've found the solution:
customButtons: {
prevWeek: {
text: '<',
click: function() {
calendar.changeView( 'resourceTimelineWeek' );
calendar.incrementDate( { days: -7 } );
}
},
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.
In the timeline view, time is displayed for 17 days or less, but
The time will be hidden when it is over 18 days.
views: {
//This is ok.
custom17days: {
type: 'timeline',
visibleRange: function(currentDate) {
return {
start: currentDate,
end: currentDate.clone().add(17, 'days')
};
}
},
//*** time display disappears! why?
custom18days: {
type: 'timeline',
visibleRange: function(currentDate) {
return {
start: currentDate,
end: currentDate.clone().add(18, 'days')
};
}
}
}
Here is the codepen: https://codepen.io/nextageot/pen/JVLXMo?editors=0010
Do you know how to always display time regardless of the number of days?
it will try to guess, but if you specify an explicit displayEventTime as true, it will always show the time.
I want fullCalendar to go to one a specifical day, but when I call
$('#calendarContainer').fullCalendar('gotoDate', date);
It only increment the view of the actual date by one.
My variable date is
var date =$.fullCalendar.moment(moment.utc(app.mCurrentStartDate).format('YYYY-MM-DD'));
My only way to make it work was to do
for (var i = 0; i < 100; i++)
{
$('#calendarContainer').fullCalendar('gotoDate', date);
}
But that is not possible.
My calendar use custom views
views: {
agendaThreeDay: {
type: 'agenda',
duration: { days: 3 },
buttonText: '3 day',
columnFormat: 'dddd D MMMM',
},
agendaTwoDay: {
type: 'agenda',
duration: { days: 2 },
buttonText: '2 day',
columnFormat: 'dddd D MMMM',
}
},
Do you know if this is the intented behaviour of gotoDate, or may be I use it the wrong way ?
Thanks.