[英]Set a fullcalendar with meteor.js
i am new to meteor, and i am trying to set a full calendar. 我是新来的流星,并且我正在尝试设置完整的日历。 i am using windows, and i did the
meteor add fullcalendar:fullcalendar
but I can't render the fullcalendar... i have read so many tutorials so far but still nothing. 我正在使用Windows,并且我在
meteor add fullcalendar:fullcalendar
但是我无法渲染fullcalendar ...到目前为止,我已经阅读了很多教程,但仍然一无所获。 here is a sample of the code that im using. 这是即时通讯使用的代码示例。 I dont know if there is a way to check if the fullcalendar package did install in my app... or if I have to import it...
我不知道是否有办法检查fullcalendar软件包是否确实安装在我的应用中...还是我必须导入它...
main.js main.js
import { Template } from 'meteor/templating';
import { Notes } from '../lib/collections.js';
//import { fullCalendar} from 'fullcalendar';
//import { moment } from 'moment';
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.calendar.onRendered()({
$('#calendario').fullCalendar();
})
main.html 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>
{{>add}}
{{>calendar}}
<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}}
<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 ="calendar">
<div class="container">
<div id="calendario">
</div>
</div>
</template>
thanks guys! 多谢你们!
Inside 内
Template.TemplateName.rendered = function()
function you have to define all the things likes.eg-: eventRender,dayClick,eventAfterRender,viewRender,eventClick etc 函数,您必须定义所有喜欢的东西,例如:eventRender,dayClick,eventAfterRender,viewRender,eventClick等
sample code that I used inside Template.TemplateName.rendered = function() 我在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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.