所以我能够在我的应用程序中创建一个完整日历，但现在我无法使事件显示......这是我的代码
main.js
import { Template } from 'meteor/templating';
import { Notes } from '../lib/collections.js';
import './main.html';
Template.body.helpers({
/*
notes:[
{text: 'My note 1'},
{text: 'My note 2'},
{text: 'My note 3'}
]
*/
notes(){
return Notes.find({});
}
});
Template.add.events({
'submit .add-form': function(){
event.preventDefault();
//get input value
const target = event.target;
const text = target.text.value;
//insert note into collection
Notes.insert({
text,
createdAt: new Date()
});
//clear the form
target.text.value = '';
//close the modal
$('#modal1').modal('close');
return false;
}
});
Template.note.events({
'click .delete-note': function(){
Notes.remove(this._id);
return false;
}
});
Template.note.helpers({
data:function(){
return moment(this.date).format("dddd, h:mm");
}
});
Template.example.helpers({
options: function() {
return {
defaultView: 'agendaDay',
};
},
events: function(){
return{
title : 'event2',
start : '2018-28-01',
allDay : false
}
}
});
main.html
<head>
<title>note manager</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<nav class="red">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Danillo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="nav-item">
<a class="waves-effect waves-light btn modal-trigger" href="#modal1"> ADD Modal</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Nomes</h1>
<ul class="collection">
{{#each notes}}
{{> note}}
{{/each}}
</ul>
</div>
<div class="container" id="container2">
{{> example}}
</div>
{{>add}}
<script>
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
</script>
</body>
<template name="note">
<li class="collection-item">
{{text}} - {{data}}
<a href="#" class="delete-note secondary-content"><i class="material-icons">close</i></a>
</li>
</template>
<template name="add">
<div id="modal1" class="modal">
<div class="modal-content">
<h3>Add Nome</h3>
<form class="add-form">
<input type="text" name="text" placeholder="Add Nome...">
</form>
</div>
</div>
</template>
<template name="example">
{{>fullcalendar options}}
</template>
我找到了一些教程，即使在这里，但它们不起作用，我的目标是将信息从模式中的表单传递到全日历的事件。感谢大家的帮助。
最佳答案
内部
Template.TemplateName.rendered = function()
您必须定义所有功能，例如:eventRender、dayClick、eventAfterRender、viewRender、eventClick 等
我在 Template.TemplateName.rendered = function() 中使用的示例代码
$('#calendar').fullCalendar({
//height: "auto",
minTime: OpenTime,
maxTime: closeTime,
slotDuration: '00:15:00',
timezone: "Asia/Colombo",
allDaySlot:false,
dayOfMonthFormat: 'ddd - DD MMM',
defaultView: 'multiColAgendaDay',
views: {
multiColAgendaDay: {
// disabledColumns: [1],
type: 'multiColAgenda',
duration: { days: 1 },
numColumns: 7,
columnHeaders: stylistDetails,
/* disabledColumns: [1] */
}
},
scrollTime: '09:00:00',
allDaySlot: false,
/* header: {
left: 'multiColAgendaDay',
center: 'title',
right: 'today prev,next'
}, */
header:false,
dayOfMonthFormat: 'ddd - DD MMM',
events( start, end, timezone, callback ) {
let filterBranchId = Session.get("filterBranchId");
let data = AppointmentsServices.find({branchId:filterBranchId,stylistDisabled: {$ne: true}}).fetch().map( ( event ) => {
return event;
});
关于javascript - 使用 meteor 在全日历中添加事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48485372/