igScheduler - cancel appointment dialog opening for specific dates
by georgianastasov
HTML
<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.scheduler-bundled.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet">
<script src="https://igniteui.com/js-data/scheduler-data"></script>
<div id="scheduler"></div>
<div id="dialog">
<p>You cannot create appointments for this day.</p>
</div>
JavaScript
$(function() {
$("#dialog").igDialog({
state : "closed",
height: 250,
modal : true,
position : { left: 250, top: 200 }
});
$("#scheduler").igScheduler({
height: "650px",
width: "760px",
views: ["monthView"],
selectedDate: new Date("2023-05-22"),
appointmentDialogOpening: function(evt, ui) {
if (!isWorkDay()) {
$("#dialog").igDialog("open");
return false;
}
},
});
});
const dates = [{
date: "14/05/2023",
},
{
date: "15/05/2023",
},
{
date: "16/05/2023",
},
{
date: "17/05/2023",
},
{
date: "18/05/2023",
},
{
date: "19/05/2023",
},
{
date: "20/05/2023",
},
];
function isWorkDay() {
const selectedDate = $("#scheduler").igScheduler(
"option",
"selectedDate"
);
const options = {
year: "numeric",
month: "2-digit",
day: "numeric"
};
const formattedDate = selectedDate.toLocaleDateString("fr", options);
return dates.some((x) => x.date === formattedDate);
}