我正在开发一个用户使用fullcalendar创建约会的项目。用户只能在可用的时隙(30分钟)上创建约会。这些事件来自名为events_json.php的文件。所有其他没有任何事件的时间段应该让一个主播说“#34;预订我"。
我使用议程周作为默认日历视图。在检查时我只能看到行而没有列(像这样)
<table>
<tbody>
<tr data-time="00:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>12am</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="00:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="01:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>1am</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="01:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="02:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>2am</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="02:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="03:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>3am</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="03:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="04:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>4am</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="04:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="05:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>5am</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="05:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="06:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>6am</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="06:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="07:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>7am</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="07:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="08:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>8am</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="08:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="09:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>9am</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="09:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="10:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>10am</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="10:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="11:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>11am</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="11:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="12:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>12pm</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="12:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="13:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>1pm</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="13:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="14:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>2pm</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="14:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="15:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>3pm</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="15:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="16:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>4pm</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="16:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="17:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>5pm</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="17:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="18:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>6pm</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="18:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="19:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>7pm</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="19:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="20:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>8pm</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="20:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="21:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>9pm</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="21:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="22:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>10pm</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="22:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="23:00:00">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"><span>11pm</span></td>
<td class="ui-widget-content"></td>
</tr>
<tr data-time="23:30:00" class="fc-minor">
<td class="fc-axis fc-time ui-widget-content" style="width: 55.5781px;"></td>
<td class="ui-widget-content"></td>
</tr>
</tbody>
</table>
&#13;
我如何实现此功能,其中每个空框都应该是一个可点击的锚点,并且说#34;预订我&#34;。
我已经对这个问题进行了一些研究,并发现了一个类似的问题,这个代码是在哪里编写的,但它不适合我。
viewRender: function(view, $element) {
$element.find('.fc-day-number').each(function() {
var $this = $(this);
var match = (/^(\d+)\-(\d+)\-(\d+)$/).exec($this.attr('data-date'));
var date = new Date(+match[1], +match[2], +match[3]);
$(this).wrapInner('<a href="http://www.example.com/booking.php?booking_date=' + encodeURIComponent(date.toUTCString()) + '" target="_blank"></a>');
});
},