javascript - How to only display working and available slots using FullCalendar?
问题描述
I have a calendar using FullCalendar, which is going to be used as a reservation system for a small massage salon.
Instead of showing all events including it's data to the website visitor, I want existing events to be not-clickable, while being grayed out without showing it's text so visitors just get an unavailable/available slots effect.
I have tried to find a solution on the internet but without any luck. My code to reproduce my situation:
<div id='calendar'></div>
<script>
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2019-03-20'
},
{
title : 'event2',
start : '2019-03-15',
end : '2019-03-18'
}
],
})
</script>
I'm almost sure I have to use viewRender, I just don't know how. Hope any of you guys is able to help me out.
解决方案
你可以像这样使用 eventRender 来做到这一点。
编辑: eventRender 的其他可能性
$(function() {
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2019-03-20'
},
{
title : 'event2',
start : '2019-03-15',
end : '2019-03-18'
}
],
eventRender: function(event, element) {
/* the following block will mark days with event
// get container
var container = element.closest('.fc-content');
if ((typeof event.start != 'undefined') && (event.start!=null)) {
// create new instance of date start to iterate
var dcurr = new Date(event.start);
var dend = (typeof event.end != 'undefined') && (event.end!=null)? event.end : event.start;
// paint date cell
while(dcurr<=dend){
var strDate = dcurr.getFullYear()+'-'+('0'+(dcurr.getMonth()+1)).slice(-2)+'-'+('0'+dcurr.getDate()).slice(-2);
// get cell reference & set background
$('td[data-date="'+strDate+'"]',container).css('background-color','#ccc');
// iterate next date
dcurr.setDate(dcurr.getDate()+1);
}
}
// prevent this event to be displayed on table
return false;
*/
// the following block will change event block style only
element.css({backgroundColor:'#ccc',border:'1px solid #999'});
$('.fc-event-title',element).html('');
}
});
});
<link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>
<div id="calendar">
</div>
编辑 :
另一种情况:有事件时不可点击的日期。(我在这个例子中使用了最新的 fullCalendar)
$(function() {
var cal = new FullCalendar.Calendar($('#calendar')[0], {
events: [
{
title : '',
start : '2019-03-20'
},
{
title : '',
start : '2019-03-15',
end : '2019-03-18'
}
],
plugins: [ 'dayGrid','interaction' ],
dateClick:function(info) {
// check class we've set on eventRender
if(!$(info.dayEl).hasClass('hasEvent')) {
alert(info.dateStr)
}
},
eventRender: function(info) {
if ((typeof info.event.start != 'undefined') && (info.event.start!=null)) {
var container = info.el.closest('.fc-content');
// create new instance of date start to iterate
var dcurr = new Date(info.event.start);
var dend = (typeof info.event.end != 'undefined') && (info.event.end!=null)? info.event.end : info.event.start;
// paint date cell
while(dcurr<=dend){
var strDate = dcurr.getFullYear()+'-'+('0'+(dcurr.getMonth()+1)).slice(-2)+'-'+('0'+dcurr.getDate()).slice(-2);
// get cell reference & add class to mark it
$('td[data-date="'+strDate+'"]',container).addClass('hasEvent');
// iterate next date
dcurr.setDate(dcurr.getDate()+1);
}
}
$(info.el).css({backgroundColor:'#ccc',border:'1px solid #999'});
}
});
cal.render();
});
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.0.1/main.min.css">
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.0.1/main.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.0.1/main.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.0.1/main.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.0.1/main.min.js"></script>
<div id="calendar">
</div>
推荐阅读
- android - Kotlin:设置TextView时lateinit属性未初始化
- java - 尝试在java的主类中打印子类方法
- list - 从列表中输出除前 n 个元素之外的元素
- git - 需要帮助使用现有代码设置新的多项目 Git 本地存储库
- post - 使用 POST 方法获取 API 给我 500(内部服务器错误)
- c++ - 实际函数调用计数与 EXPECT_CALL 不匹配
- python - 用于文本搜索的 Python REST Service Now API
- python - 在使用 iloc 的 python 中,您将如何检索数据框中特定列的最后 12 个值?
- r - excelR包R编程中的excelTable没有显示出来
- cmake - 在宏内使用带有 CMake 的 find_package 的 Qt4 出现问题