如何仅使用FullCalendar显示工作和可用的插槽？

Question

我有一个使用FullCalendar的日历，它将被用作小型按摩沙龙的预订系统。

我没有向网站访问者显示包括它的所有事件在内的所有事件，而是希望现有事件不可点击，而灰显但不显示文本，因此访问者只能获得不可用/可用的插槽效果。

我试图在互联网上找到一个解决方案，但没有任何运气。我的代码重现我的情况：

<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>

我几乎肯定我必须使用viewRender，我只是不知道如何。希望你们中的任何人都能帮助我。

http://jsfiddle.net/24973uey/7/

Answer 1

你可以像这样使用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/[email protected]/main.min.css">
	<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/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/[email protected]/main.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
	<div id="calendar">

	</div>