On the Mobiscroll Calendar (http://mobiscroll.com/) you can set Marked Dates when initializing the Mobiscroll Calendar. Is there a way to update the Marked Dates after the calendar has been initialized? I can’t seem to find a method for doing so in the documentation.
Example from the documentation:
$(function(){
$('#calendar').mobiscroll().calendar({
marked: { dates: [ new Date(2013, 5, 6), new Date(2013, 5, 10) ] }, // Initially marked days
onMonthChange: function (year, month, inst) {
// Load marked days for (year, month), (year, month - 1), (year, month + 1)
// Update dates only
inst.settings.marked.dates = [ new Date(year, month - 1, 15), new Date(year, month, 15), new Date(year, month + 1, 15) ];
// OR Update the whole marked object (only if necessary)
inst.settings.marked = {
dates: [ new Date(year, month - 1, 15), new Date(year, month, 15), new Date(year, month + 1, 15) ],
daysOfMonth: ['5/1', '12/24', '12/25']
};
}
});
});
Related
I am trying to create a calendar which depends on a parameter. If the user wants a weekend pass I need to let him choose only one set of the days Friday, Saturday, Sunday in the period of one month.
Example:
If I choose to buy a weekend pass today 09/09/2021, I can have the options 10-12/09,17-19/09,24-26/09 for September.
The calendar has to be Infinite in order to be renewed every day. I have created the values date, month, year to get the current full date, which I parse to minDate maxDate in order to limit the options into only one month.
Code:
render() {
let newDate = new Date()
let date = newDate.getDate();
let month = newDate.getMonth();
let year = newDate.getFullYear();
let weeklyVignette = newDate.getDate();
const {label, t, value = '', loading, error, width, height, displayOptions, locale, key, required, validateOnBlur,
theme, name, proposed, disabled = false, onChange, minDateBeforeToday, setError, available=true,
minDate = new Date(year, month, date),
maxDate = new Date(year, month, date+30)} = this.props;
const {selected} = this.state;
const _locale ={...locale, ...{weekdays: locale.weekdays.map(day => t(day))}}
const resultCalendar =
this.state.open && !disabled
? <InfiniteCalendar
width={width}
height={height}
selected={value||selected||proposed}
displayOptions={displayOptions}
locale={_locale}
theme={theme}
minDate={minDate}
weeklyVignetteDays = { (weeklyVignette===4 && weeklyVignette===5 && weeklyVignette===6 )}
max = { new Date(year, month, date+30) } // Maximum month to render
min = { new Date(year, month, date) } // Minimum month to render
maxDate={maxDate}
onSelect={(e) => this.onClick(e, onChange)}
/>
: null;
How can I block all the days of the current month except Fridays, Saturdays and Sundays?
Any thoughts?
you should use the property of disabledDays
For example, to disable Monday and Sunday: [0, 6]
in your case you should use: disabledDays = [0,1,2,3]
I'm using bootstrap datetime-picker in angularjs
I need to show color on some specific dates i.e. on weekend and holiday dates
Here is my date picker option :-
$scope.dateOptions = {
dateFormat: 'yyyy-MM-dd',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1,
onChangeDate: countDays
};
I'm getting list of holidays from database and weekends I'm able to identify.
How to show color to specific date?
I tried using some custom css but its applying on all the dates not to specific.
Thanks!
Answering your question
How to show color to specific date?
Bootstrap datetime-picker for Angularjs Do provide an option to apply custom class.
Try this
$scope.dateOptions = {
dateFormat: 'yyyy-MM-dd',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1,
onChangeDate: countDays,
customClass: getDayClass // fucntion having logic to select particular dates
};
The function getDayClass can be implement like this
function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
// check for weekend 0 for sun and 6 for sat
if(date.getDay() == 0 || date.getDay() == 6)
{
return 'full'; //return class to be applied
}
}
return '';
}
Set the class for dates
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date(tomorrow);
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
The date picker calls date picker options for every date at the time of initialization.
you can check the Plunker example.
I need to enable two days only in my react-day-picker. The remaining days should be disabled. Could anyone give me an example of how to accomplish this?
I tried with this example but it not working for me.
export default function Example() {
getDaysInMonth(month, year){
// Since no month has fewer than 28 days
let date = new Date(year, month, 1);
const days = [];
while (date.getMonth() === month) {
dateys.push(new Date(date));
date.setDate(date.getDate() + 1);
}
return days;
}
const disabledMonth = this.getDaysInMonth(12, 2017);
return (
<DayPicker
initialMonth={new Date(2017, 3)}
disabledDays={
this.disabledMonth.filter(
(date) => ![new Date(2017, 12, 3), new Date(2017, 12, 13)].includes(date)
)
}
/>
);
}
i tried to run this code i getting empty array
An option is that you could set that the user should not be able to change the month if the two days are within the same month. You can set which month this is with initial month.
You can then set the disabled days which will be an array of dates which is the days of that month excluding the two available days.
Example:
If you use something like this to have a method to get all dates in a month, you could do something like this:
import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
export default function Example() {
const disabledMonth = getDaysInMonth(11, 2017);
return (
<DayPicker
initialMonth={new Date(2017, 11)}
disabledDays={
this.disabledMonth.filter(
(date) => ![new Date(2017, 11, 3).toString(), new Date(2017, 11, 13).toString()].includes(date.toString())
)
}
/>
);
}
Here i am filtering out two dates, the 3rd and 13th of december, which should be available.
This is written with es6
Im using this Angular directive for date range picker
https://github.com/g00fy-/angular-datepicker
At the moment is sets the default date to current date
How can I set the first date range to be 1st day of the month. How to set the date?
<div date-range start="a" end="b"> </div>
{{(a|date)||"pick start"}} {{(b|date)||"pick end"}}
You could use
var date = new Date();
$scope.a = new Date(date.getFullYear(), date.getMonth(), 1);
$scope.b = new Date(date.getFullYear(), date.getMonth() + 1, 0);
Liferay's calendar portlet uses AUI scheduler. I got following issue :
I created following two an event on same day which starts on weekend(Sunday) and ends on next day (Monday)(first day of next week)
Event-A :
start-time : 12:10 PM, Sunday
end-time : 11:59 PM, Monday
Event-B :
start-time : 12:00 PM, Sunday
end-time : 11:59 PM, Monday
Ideally both the events should span across Sunday and Monday. But on scheduler (month) view it, Event-A only spans across Monday and Event-B spans on Sunday and Monday both, which is correct rendering.
Anyone have any idea on this ??
I have created a sample fiddle which will be helpful to understand this: http://jsfiddle.net/RU5xw/41/
YUI().use(
'aui-scheduler',
function (Y) {
var events = [{
content: 'Event A',
endDate: new Date(2013, 1, 17, 4),
reminder: false,
startDate: new Date(2013, 1, 16, 13)
}, {
content: 'Event B',
endDate: new Date(2013, 1, 17, 4),
reminder: false,
startDate: new Date(2013, 1, 16, 12)
}];
var agendaView = new Y.SchedulerAgendaView();
var dayView = new Y.SchedulerDayView();
var eventRecorder = new Y.SchedulerEventRecorder();
var monthView = new Y.SchedulerMonthView();
var weekView = new Y.SchedulerWeekView();
new Y.Scheduler({
activeView: monthView,
boundingBox: '#myScheduler',
date: new Date(2013, 1, 4),
eventRecorder: eventRecorder,
items: events,
render: true,
views: [dayView, weekView, monthView, agendaView]
});
});
I found a fix available for this on Liferay marketplace. Calendar Fix Hook