I'm using a my-date-range-picker to display a calendar to the user choose a date and display her in a span like a string.
Step by step:
I click in the label to open the calendar;
The calendar opens with current date selected;
I choose a date, for example, 8th October, 2018;
The calendar closes;
The date that i previous choose appears correctly in span;
Open the calendar again;
Here, the calendar shows the current month(September). I want that calendar show the date that i previous select - 8th October, 2018;
My HTML code for date picker:
<my-date-range-picker *ngIf="this.opened && view=='date'" class="date_picker" [options]="date_picker" [(ngModel)]="this.model" (dateSelected)="onDateRangeChanged($event)"></my-date-range-picker>
The label responsable to show the selected date:
<div class="lineheight" [ngClass]="{'dates': type_resume_view == 'none'}">
<span>{{dates.first.format('DD/MM/YYYY')}}</span>
</div>
In my TS file, the event of date change goes to:
onDateRangeChanged(ev) {
if (this.view == "range") {
this.dates.first = moment({
day: ev.beginDate.day,
month: ev.beginDate.month - 1,
year: ev.beginDate.year
});
this.dates.last = moment({
day: ev.endDate.day,
month: ev.endDate.month - 1,
year: ev.endDate.year
});
this.setDate();
if (!this.always_open) {
this.onSelectDate.emit(this.dates);
this.opened = false;
}
}
if (this.view == "date") {
this.dates.first = moment({
day: ev.date.day,
month: ev.date.month - 1,
year: ev.date.year
});
this.dates.last = moment({
day: ev.date.day,
month: ev.date.month - 1,
year: ev.date.year
});
if (!this.always_open) {
this.onSelectDate.emit(this.dates);
this.opened = false;
}
if (this.interval != undefined) {
switch (this.interval) {
case "week":
this.dates.first = this.dates.first.startOf("week").add(1, 'day');
this.dates.last = this.dates.last.endOf("week").add(1, 'day');
break;
case "month":
this.dates.first = this.dates.first.startOf("month");
this.dates.last = this.dates.last.endOf("month");
break;
}
}
this.setDate();
if (this.always_open) {
this.opened = false;
setTimeout(() => {
this.opened = true
}, 0);
}
}
}
And then to method setDate():
this.model.beginDate.year = this.dates.first.format("YYYY");
this.model.beginDate.month = this.dates.first.format("MM");
this.model.beginDate.day = this.dates.first.format("DD");
this.model.endDate.year = this.dates.last.format("YYYY");
this.model.endDate.month = this.dates.last.format("MM");
this.model.endDate.day = this.dates.last.format("DD");
My declared variables are:
date_picker: IMyDrpOptions = {
showClearBtn: false,
showApplyBtn: false,
showSelectDateText: false,
componentDisabled: false,
markCurrentDay: true,
showWeekNumbers: true,
inline: true,
dateFormat: 'yyyy-mm-dd',
firstDayOfWeek: 'mo',
disableUntil: {
year: 1990,
month: 1,
day: 1
}
};
private model: any = {
beginDate: {
year: 2018,
month: 10,
day: 9
},
endDate: {
year: 2018,
month: 10,
day: 19
}
};
Auxiliar Methods:
open_calendar() {
this.model = this.model;
if (!this.always_open) {
this.opened = !this.opened;
if (this.opened) {
this.onCalendarOpen.emit(this.dates);
} else {
this.onClose.emit();
}
}
}
close_calendar() {
this.opened = false;
this.onClose.emit();
}
I just want that calendar open in the previous selected month, because the date is correctly selected.
UPDATE:
The example that i describe, the date is correct but not show the month correctly
my-date-range-picker has the defaultMonth attribute, that's what you will use to set which month the calendar should open such as:
import { IMyDefaultMonth } from 'mydatepicker';
private defaultMonth: IMyDefaultMonth = { defMonth: '12/2019' };
In HTML:
<my-date-range-picker name="mydate" [options]="myDatePickerOptions" [defaultMonth]="defaultMonth" />
in the example the default month will open at December 2019 as defined by defaultMonth.
Related
I am using FullCalendar v5.10.0
Is there any feature in full calendar that efficiently allows event creation only in a particular time slots i.e. Only within "availableForMeeting" time slots.
As shown in below image I want to restrict users to create events only in green highlighted time slots i.e. "availableForMeeting" time slots as defined in code below.
Expected behavior -
According to current code it does not allow users to create events outside defined business hours i.e. should not allow to create events in grayed out time slots.
In short behavior should be similar to above business hours feature for all time slots which are outside of green highlighted "availableForMeeting" time slots.
Code -
<div id='calendar'></div>
<div>
Locales:
<select id='locale-selector'></select>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var initialLocaleCode = 'en';
var localeSelectorEl = document.getElementById('locale-selector');
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
selectable: true,
unselectAuto: true,
nowIndicator: true,
editable: true,
locale: initialLocaleCode,
selectConstraint: "businessHours",
eventConstraint: "businessHours",
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [
{
"title": "Meeting",
"start": "2021-10-21T13:00:00",
"end": "2021-10-21T13:40:00",
"constraint": "availableForMeeting",
"overlap": false,
"color": "#257e4a"
},
{
"groupId": "availableForMeeting",
"start": "2021-10-18T10:00:00",
"end": "2021-10-18T17:00:00",
"display": "background"
},
{
"groupId": "availableForMeeting",
"start": "2021-10-21T12:00:00",
"end": "2021-10-21T15:00:00",
"display": "background"
}
],
select: function (selectionInfo) {
var selectionStart = moment(selectionInfo.start);
var today = moment(); // passing moment nothing defaults to today
if (selectionStart < today) {
calendar.unselect()
}
else {
var eventName = prompt('Enter Title');
if (eventName) {
var allDay = !selectionInfo.start.hasTime && !selectionInfo.end.hasTime;
var newEvent = new Object();
newEvent.title = eventName;
newEvent.start = selectionInfo.start;
newEvent.end = selectionInfo.end;
newEvent.allDay = false;
newEvent.stick = true;
newEvent.constraint = 'availableForMeeting';
calendar.addEvent(newEvent);
}
}
},
selectOverlap: function (event) {
return event.rendering === 'background';
}
});
calendar.setOption('businessHours',
[
{
daysOfWeek: [1, 2, 3, 4, 5],
startTime: '08:00',
endTime: '12:00'
},
{
daysOfWeek: [1, 2, 3, 4, 5],
startTime: '13:00',
endTime: '17:00'
}
]
);
calendar.render();
// build the locale selector's options
calendar.getAvailableLocaleCodes().forEach(function (localeCode) {
var optionEl = document.createElement('option');
optionEl.value = localeCode;
optionEl.selected = localeCode == initialLocaleCode;
optionEl.innerText = localeCode;
localeSelectorEl.appendChild(optionEl);
});
// when the selected option changes, dynamically change the calendar option
localeSelectorEl.addEventListener('change', function () {
if (this.value) {
calendar.setOption('locale', this.value);
}
});
});
</script>
I am using DateTime picker from material.
But I want to have the format like this:
2021-02-15 23:59:59
So I try it like this:
export const MY_DATE_FORMATS = {
parse: {
dateInput: 'YYYY-MM-DD',
},
display: {
dateInput: 'MMM DD, YYYY',
monthYearLabel: 'MMMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY'
},
};
#Component({
selector: 'app-widget-editor',
templateUrl: './widget-editor.component.html',
styleUrls: ['./widget-editor.component.css'],
providers: [{provide: DateAdapter, useClass: AppDateAdapter},
{provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS}]
})
and template looks like this:
<div class="form-group row">
<label for="start" class="editor-label col-sm-4"><strong> Time start:</strong></label>
<input [(ngModel)]="start" [ngModelOptions]="{standalone: true}" type="text" class="date" id="start" value="start" matInput [ngxMatDatetimePicker]="picker">
<ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker>
<span class="ml-2" (click)= "reOpenCalender()">
<fa-icon [icon]="faCalendarAlt" size="1x" #picker [styles]="{'color': '#B7B7B7'}"
></fa-icon>
</span>
</div>
But this doesn't work, it still shows this:
2/25/2021, 16:32:52
So what I have to change?
I try it like this:
export class AppDateAdapter extends NativeDateAdapter {
format(date: Date, displayFormat: Object): string {
if (displayFormat === 'input') {
let day: string = date.getDate().toString();
day = +day < 10 ? '0' + day : day;
let month: string = (date.getMonth() + 1).toString();
month = +month < 10 ? '0' + month : month;
let year = date.getFullYear();
return `${year}-${month}-${day}`;
}
return date.toDateString();
}
}
export const APP_DATE_FORMATS: MatDateFormats = {
parse: {
dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
},
display: {
dateInput: 'input',
monthYearLabel: { year: 'numeric', month: 'numeric' },
dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric'
},
monthYearA11yLabel: { year: 'numeric', month: 'long' },
}
};
But I don't use a date picker, But I am using: DateTime picker:
https://stackblitz.com/edit/demo-ngx-mat-datetime-picker?file=src%2Fapp%2Fapp.module.ts
and then it doesn't work.
You could make it yourself by putting together the day, month, and year. I'm not sure if this code is exactly what you want but you could do something similar.
var today = new Date();
var date = today.getDate() + "/" + (today.getMonth() + 1) + "/" + today.getFullYear();
Use thisone for your date format.
DateFormat :- this.currentDate = ${this.currDate.getFullYear().toString().padStart(4, '0')}-${(this.currDate.getMonth() + 1).toString().padStart(2, '0')}-${this.currDate.getDate().toString().padStart(2, '0')} ${this.currDate.getHours().toString().padStart(2, '0')}:${this.currDate.getMinutes().toString().padStart(2, '0')}:${this.currDate.getSeconds().toString().padStart(2, '0')}
Using fullcalendar library, I would like to display the start time for each empty cell on my calendar (empty cells are the one marked with a red cross or red dots in the below screenshot, I modified a bit the aspect of the calendar):
So my expected output is a calendar were timeslots become buttons, when you click you start the process of booking a 30 minutes appointment which would start at the written time (the green slot is an hover effect in the following screenshot):
I can't find any easy way to do it through after reading fullcalendar documentation : https://fullcalendar.io/docs
Subsidiary question, I can't find the way to change the style of the empty cell in the CSS. Can't manage to select the elements through my Chrome console.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
columnHeaderHtml: function(date) {
if (date.getUTCDay() === 0) {
var date_day = "Lundi";
}
if (date.getUTCDay() === 1) {
var date_day = "Mardi";
}
if (date.getUTCDay() === 2) {
var date_day = "Mercredi";
}
if (date.getUTCDay() === 3) {
var date_day = "Jeudi";
}
if (date.getUTCDay() === 4) {
var date_day = "Vendredi";
}
if (date.getUTCDay() === 5) {
var date_day = "Samedi";
}
if (date.getUTCDay() === 6) {
var date_day = "Dimanche";
}
if(date.getMonth() === 0)
{
var date_month = "Jan";
}
if(date.getMonth() === 1)
{
var date_month = "Fev";
}
if(date.getMonth() === 2)
{
var date_month = "Mar";
}
if(date.getMonth() === 3)
{
var date_month = "Avr";
}
if(date.getMonth() === 4)
{
var date_month = "Mai";
}
if(date.getMonth() === 5)
{
var date_month = "Juin";
}
if(date.getMonth() === 6)
{
var date_month = "Juil";
}
if(date.getMonth() === 7)
{
var date_month = "Août";
}
if(date.getMonth() === 8)
{
var date_month = "Sept";
}
if(date.getMonth() === 9)
{
var date_month = "Oct";
}
if(date.getMonth() === 10)
{
var date_month = "Nov";
}
if(date.getMonth() === 11)
{
var date_month = "Dec";
}
var day_num = date.getDate();
return '<b>'+date_day+'</b><br><small>'+day_num+" "+date_month+"</small>";
},
plugins: [ 'interaction', 'dayGrid', 'list', 'googleCalendar','timeGrid' ],
selectable: true,
defaultView: 'timeGridFourDay',
views: {
timeGridFourDay: {
type: 'timeGrid',
duration: { days: 4 },
buttonText: '4 day'
}
},
slotLabelFormat:{
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: true,
meridiem: 'short'
},
locale:'fr',
header: {
left: 'prev today',
right: 'next'
},
validRange: {
start: '2019-08-05',
end: '2019-09-05'
},
allDaySlot:false,
firstDay:1,
minTime:"08:00:00",
maxTime:"20:00:00",
displayEventTime: true, // don't show the time column in list view
// THIS KEY WON'T WORK IN PRODUCTION!!!
// To make your own Google API key, follow the directions here:
// http://fullcalendar.io/docs/google_calendar/
googleCalendarApiKey: 'AIzaSyAL9K2UqkCVfV0n81mDW0iEpOJSwcklfsY',
// US Holidays
events: 'fr.fr#holiday#group.v.calendar.google.com',
eventClick: function(arg) {
arg.jsEvent.preventDefault() // don't navigate in main tab
console.log(arg);
},
select: function(info) {
console.log(info)
},
loading: function(bool) {
},
eventSources: [
{
googleCalendarId: 'contact#vetorino.com',
className: "gcalEvent"
}],
displayEventEnd:false,
events:[
{ // this object will be "parsed" into an Event Object
start: '2019-08-05 12:30:00', // a property!
end: '2019-08-05 14:00:00', // a property! ** see important note below about 'e6d' **
overlap: true,
backgroundColor:"#F7F7F7",
textColor:"#979797",
classNames:"closed",
}],
contentHeight: "auto",
});
calendar.render();
});
So far as shown in my previous screenshot I just managed to have empty cells, the only cells where you find some information are cells containing events.
As discussed in the comments above, there is no single element in the fullCalendar HTML which represents a specific "cell" or "slot" in the timeGrid view. The grid you can see on screen is actually an illusion created by layering multiple tables on top of each other.
So to meet your requirement for a user to be able to select a 20-minute appointment in a free slot, I can see two main options. The first is what I would normally recommend, using the standard fullCalendar functionality. The second is more like what you are asking for, but I think it over-complicates things.
1) This option simply sets the calendar with a slot duration of 20 minutes, and then has code to stop the user from selecting a longer period of time (they cannot select a shorter period, due to the slotDuration setting. This means that they can click on any empty space once and it will know to create an event of the correct length in that location. The user is not allowed to select any slot where an event already exists. (P.S. I expect in reality you will need to collect more data before adding events, but for the demonstration it adds an event instantly.)
document.addEventListener("DOMContentLoaded", function() {
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById("calendar");
var calendar = new Calendar(calendarEl, {
plugins: ["timeGrid", "interaction"],
header: {
left: "prev,next today",
center: "title",
right: "timeGridFourDay"
},
defaultView: "timeGridFourDay",
views: {
timeGridFourDay: {
type: "timeGrid",
duration: { days: 4 },
buttonText: "4 day"
}
},
slotLabelFormat: {
hour: "numeric",
minute: "2-digit",
omitZeroMinute: true,
meridiem: "short"
},
allDaySlot: false,
firstDay: 1,
minTime: "08:00:00",
maxTime: "20:00:00",
contentHeight: "auto",
slotDuration: "00:20:00",
selectable: true,
select: function(info) {
//console.log(info);
calendar.addEvent({ "title": "Test", start: info.start, end: info.end })
calendar.unselect();
},
selectOverlap: false,
selectAllow: function(selectInfo) {
var stM = moment(selectInfo.start);
var enM = moment(selectInfo.end);
var diff = enM.diff(stM, "minutes");
console.log(diff);
if (diff > 20)
{
return false;
}
return true;
},
events: [
{ "title": "Existing event", "start": "2019-08-08 10:00", "end": "2019-08-08 10:20"},
{ "title": "Existing event", "start": "2019-08-08 13:20", "end": "2019-08-08 13:40"},
]
});
calendar.render();
});
Demo: https://codepen.io/ADyson82/pen/aeqJQg
2) This option is closer to your desired UI (from your 2nd screenshot) but is a bit more complicated to achieve. I also, personally, think it leaves your calendar looking cluttered, and making it harder to see where the free and busy slots are, but ultimately it's up to you how you want to implement it. This works by adding a second event source, containing a list of all currently free slots. These are then used to display the start time of each free slot in the centre of it. They are coloured differently from the existing events (indicating a busy slot), so that it's a bit easier to tell the difference.
Of course, this requires you to use your server-side code to calculate all the currently free slots in your database and use that information to populate the second event source. (In the demo the free slot data is static, but of course that will not work in a real application.)
document.addEventListener("DOMContentLoaded", function() {
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById("calendar");
var calendar = new Calendar(calendarEl, {
plugins: ["timeGrid", "interaction"],
header: {
left: "prev,next today",
center: "title",
right: "timeGridFourDay"
},
defaultView: "timeGridFourDay",
views: {
timeGridFourDay: {
type: "timeGrid",
duration: { days: 4 },
buttonText: "4 day"
}
},
slotLabelFormat: {
hour: "numeric",
minute: "2-digit",
omitZeroMinute: true,
meridiem: "short"
},
allDaySlot: false,
firstDay: 1,
minTime: "08:00:00",
maxTime: "20:00:00",
contentHeight: "auto",
slotDuration: "00:20:00",
displayEventTime: false,
eventClick: function(info) {
if (info.event.extendedProps.type == "free") {
calendar.addEvent({
title: "Test",
start: info.event.start,
end: info.event.end
});
info.event.remove(); //delete the "free slot" event
}
},
eventSources: [
{
id: "busy",
events: [
{
title: "Existing event",
start: "2019-08-08 10:00",
end: "2019-08-08 10:20"
},
{
title: "Existing event",
start: "2019-08-08 13:20",
end: "2019-08-08 13:40"
}
]
},
{
id: "free",
backgroundColor: "green",
events: [
{
title: "08:00",
start: "2019-08-08 08:00",
end: "2019-08-08 08:20",
type: "free"
},
{
title: "08:20",
start: "2019-08-08 08:20",
end: "2019-08-08 08:40",
type: "free"
},
{
title: "08:40",
start: "2019-08-08 08:40",
end: "2019-08-08 09:00",
type: "free"
},
{
title: "09:00",
start: "2019-08-08 09:00",
end: "2019-08-08 09:20",
type: "free"
},
{
title: "09:20",
start: "2019-08-08 09:20",
end: "2019-08-08 09:40",
type: "free"
},
{
title: "09:40",
start: "2019-08-08 09:40",
end: "2019-08-08 10:00",
type: "free"
},
{
title: "10:20",
start: "2019-08-08 10:20",
end: "2019-08-08 10:40",
type: "free"
},
{
title: "10:40",
start: "2019-08-08 10:40",
end: "2019-08-08 11:00",
type: "free"
},
]
}
]
});
calendar.render();
});
For this demo I only created handful of the "free" slots (because it was tedious to create them), but hopefully you can get the idea of how it would start to look with dozens of them all over the calendar. Of course again you can amend the CSS to your requirements.
Demo: https://codepen.io/ADyson82/pen/JgpNEX
(You can of course amend the CSS of this further to make it appear more like your desired look and feel.)
Addendum: Here's the OP's final version, for anyone who is interested in the end product - based on taking the above suggestions into consideration: https://codepen.io/hugo-trial/pen/rXdajv
I have this date range datepicker :
$(function () {
//date picker range
$(function () {
var dateFormat = "mm/dd/yy",
from = $("#<%= TextBox1.ClientID %>").datepicker({
//defaultDate: "+1w",
changeMonth: true,
minDate: MinDateManipulation(),
beforeShowDay: DisableMonday,
maxDate: '+2M',
numberOfMonths:1
})
.on("change", function () {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#<%= TextBox2.ClientID %>").datepicker({
//defaultDate: "+1w",
changeMonth: true,
beforeShowDay: DisableMonday,
maxDate: '+2M',
numberOfMonths:1
})
.on("change", function () {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
It work when i tried to disable date from 2 months after current date, but the purpose is, to disable date in January 1st every next year after current year.
for example : current date [11/3/2018]
I want to disable date to chose after last day of December every current year, with maxDate [31/12/2018].
But how do we set dynamically for the value of the maxDate? without update the value of the year manually with my daterange condition script?
It's not clear the range you are trying to capture, yet you can do a lot with what you already have.
One way would be to set it to a string format:
var yr = $.datepicker.formatDate("yy", new Date());
var dec31 = "12/31/" + yr;
....({
maxDate: dec31,
})
this will get the current Year (2018) and create a string that can be used as the max date: 12/31/2018. This will remain dynamic and update each year.
You could also define a number of days in the year as holidays. Lots of things you can do.
Maybe this example will help clear up a few things.
$(function() {
var holidays = {
2018: {
11: {
12: [
false,
"holiday",
"Veterans Day Observed"
],
22: [
false,
"holiday",
"Thanksgiving Day"
]
},
12: {
25: [
false,
"holiday",
"Christmas Day"
],
31: [
false,
"holiday",
"New Year's Eve"
]
}
},
2019: {
1: {
1: [
false,
"holiday",
"New Year's Day"
],
21: [
false,
"holiday",
"Martin Luther King Jr. Day"
]
},
2: {
18: [
false,
"holiday",
"Presidents' Day"
]
},
5: {
27: [
false,
"holiday",
"Memorial Day"
]
},
7: {
4: [
false,
"holiday",
"Independence Day"
]
},
9: {
2: [
false,
"holiday",
"Labor Day"
]
},
10: {
14: [
false,
"holiday",
"Columbus Day"
]
},
11: {
11: [
false,
"holiday",
"Veterans Day"
],
28: [
false,
"holiday",
"Thanksgiving Day"
]
},
12: {
25: [
false,
"holiday",
"Christmas Day"
],
31: [
false,
"holiday",
"New Year's Eve"
]
}
}
};
function disableDays(d) {
var result = [true, ""];
var yr = $.datepicker.formatDate("yy", d),
mo = $.datepicker.formatDate("m", d),
dy = $.datepicker.formatDate("d", d);
if ($.datepicker.formatDate("D", d) == "Mon") {
result[0] = false;
}
if (holidays[yr] !== undefined) {
if (holidays[yr][mo] !== undefined) {
if (holidays[yr][mo][dy] !== undefined) {
console.log("Holiday:", yr, mo, dy);
result = holidays[yr][mo][dy];
}
}
}
return result;
}
var dateFormat = "mm/dd/yy",
from = $("#client-id-1").datepicker({
//defaultDate: "+1w",
changeMonth: true,
minDate: 0,
beforeShowDay: disableDays,
maxDate: '+1y',
numberOfMonths: 1
})
.on("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#client-id-2").datepicker({
//defaultDate: "+1w",
changeMonth: true,
beforeShowDay: disableDays,
maxDate: '+2m',
numberOfMonths: 1
})
.on("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Client 1: <input type="text" id="client-id-1"></p>
<p>Client 2: <input type="text" id="client-id-2"></p>
You can use moment.js and use my code to get max date:
function _getMaxDate() {
const today = moment().startOf('day')
const lastDayOfYear = moment().endOf('year').startOf('day')
return lastDayOfYear.diff(today, 'days')
}
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.