Set a fullcalendar with meteor.js

Set a fullcalendar with meteor.js - javascript

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. 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...
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
<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">
Danillo
<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}}
<i class="material-icons">close</i>
</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
sample code that I used inside 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;
});

Related

Why won't my delete item event emit to the parent?

I am trying to delete an item from my data attribute. A delete is triggered by the delete button on each item. That they triggers the deleteItem(index) function in the child component, which then emits to the parent. But for some reason it never triggers the event handler in the parent.
Help with the drag n drop would be a plus as well. Thank you.
https://jsfiddle.net/4Ld0ubjt/
<html>
<head>
<title>
</title>
<!--- Import Vue.js library --->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="vue.js"></script>
</head>
<body>
<div class="panel-body">
<div id="itemsApp" #delete-item="deleteItem(idx)">
<list-item v-for="(item, index) in items" v-bind:index="index" v-bind:item="item"></list-item>
</div>
</div>
<div class="panel-footer clearfix">
</div>
</div>
</body>
</html>
<!--- END: Main body --->
/**
* Function to run after the Document has completed loading.
*/
$(function () {
/**
* Load and initialize the Module Object
*/
Vue.component('list-item', {
props: ['item', 'index'],
template: `
<div draggable="true" #dragStart="dragstart(index, $event)" #dragFinish="dragfinsih(index, $event)" class="bookmark list-group-item clearfix" :id="index">
<span class="btn glyphicon glyphicon-menu-hamburger pull-left" title="Move Bookmark"></span>
<a :href="item.URL_TE" :id="item.URL_HSH_NR">{{item.URL_NA}} - {{index}}</a>
<div class="btn-group pull-right">
<a class="btn btn-default glyphicon glyphicon-pencil edit" role="button" title="Edit Bookmark" href="##"></a>
<button v-on:click="deleteItem(index)" class="btn btn-danger glyphicon glyphicon-remove delete" title="Delete Bookmark"></button>
</div>
</div>
`,
methods: {
deleteItem(idx) {
console.log("Index? " + idx);
this.$emit('delete-item', idx);
},
/**********START DRAG AND DROP LOGIC********** */
dragstart(which, ev) {
console.log("In dragStart " + JSON.stringify(ev));
ev.dataTransfer.setData('Text', which.index);
ev.dataTransfer.dropEffect = 'move'
this.dragging = which;
},
dragfinish(to, ev) {
this.moveItem(this.dragging, to);
},
moveItem(from, to) {
this.bookmarks.splice(to, 0, this.bookmarks.splice(from, 1)[0]);
}
/**********END DRAG AND DROP LOGIC********** */
},
})
var itemsApp = new Vue({
el: '#itemsApp',
data: {
items: [
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
},
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
}
]
},
methods: {
deleteItem(i) {
console.log("In parent deleteItem " + i);
this.data.splice(i, 1);
}
}
})
});

Event handler should be on child component
<div id="itemsApp">
<list-item v-for="(item, index) in items" v-bind:index="index" v-bind:item="item" #delete-item="deleteItem"></list-item>
</div>
In Vue component, data should be a function
var itemsApp = new Vue({
el: '#itemsApp',
data() {
return {
items: [
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
},
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
}
]
}
},
methods: {
deleteItem(i) {
console.log("In parent deleteItem " + i);
this.items.splice(i, 1);
}
}
})
You can check demo here

Add events in fullcalendar with meteor

so I was able to create a fullcalendar in my application, but now I cant make the events show... this is my code
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">
Danillo
<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}}
<i class="material-icons">close</i>
</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>
I have found some tutorials, even here, but they dont work, my goal is to pass the information from the form in my modal to the events of the fullcalendar. Thanks for your help guys.

Inside
Template.TemplateName.rendered = function()
function you have to define all the things likes.eg-: eventRender,dayClick,eventAfterRender,viewRender,eventClick etc
sample code that I used inside 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;
});

How do I access object values in various elements to display event data?

I am using vue.js to build a events management app. The problem is that I am unable to render the value of each event in the list group to the DOM. It just keeps rendering the curly braces expression to the DOM.
Here is the Js Fiddle :
https://jsfiddle.net/ufy01L3q/2/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>events Management</title>
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://unpkg.com/vue"></script>
<!-- navigation bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand"><i class = ""></i> events Management </a>
</div>
</nav>
<!-- main body of our application -->
<div class="container" id="events">
<!-- add an event form -->
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Add an Event</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input class="form-control" placeholder="Event Name" v-model="event.name">
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Event Description" v-model="event.description"></textarea>
</div>
<div class="form-group">
<input type="date" class="form-control" placeholder="Date" v-model="event.date">
</div>
<button class="btn btn-primary" v-on="click: addEvent">Submit</button>
</div>
</div>
</div>
<!-- show the events -->
<div class="col-sm-6">
<div class="list-group">
<a href="#" class="list-group-item" v-repeat="event in events">
<h4 class="list-group-item-heading">
<i class="glyphicon glyphicon-bullhorn"></i>
{{ event.name }}
</h4>
<h5>
<i class="glyphicon glyphicon-calendar" v-if="event.date"></i>
{{ event.date }}
</h5>
<p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>
<button class="btn btn-xs btn-danger" v-on="click: deleteEvent($index)">Delete</button>
</a>
</div>
</div>
</div>
// app.js
<script>
new Vue({
// We want to target the div with an id of 'events'
el: '#events',
// Here we can register any values or collections that hold data
// for the application
data: {
event: {
name: '',
description: '',
date: ''
},
events: []
},
// Anything within the ready function will run when the application loads
ready: function() {
// When the application loads, we want to call the method that initializes
// some data
this.fetchEvents();
},
// Methods we want to use in our application are registered here
methods: {
// We dedicate a method to retrieving and setting some data
fetchEvents: function() {
var events = [{
id: 1,
name: 'TIFF',
description: 'Toronto International Film Festival',
date: '2015-09-10'
},
{
id: 2,
name: 'The Martian Premiere',
description: 'The Martian comes to theatres.',
date: '2015-10-02'
},
{
id: 3,
name: 'SXSW',
description: 'Music, film and interactive festival in Austin, TX.',
date: '2016-03-11'
}
];
// $set is a convenience method provided by Vue that is similar to pushing
// data onto an array
this.$set('events', events);
},
// Adds an event to the existing events array
addEvent: function() {
if (this.event.name) {
this.events.push(this.event);
this.event = {
name: '',
description: '',
date: ''
},
}
}
}
});
</script>
</body>
</html>
<!-- JS -->
Thank you in advance for the help.

First: you don't properly include Vue. Include it inside <head>, and in jsfiddle include just a script url, without tags.
Second: your event binding syntax is wrong: you're trying v-on="click: addEvent", but the proper syntax is v-on:click="addEvent($event)" - in this example you also pass $event to your method, and you an extract a value like this: $event.target.value.

fullcalnder not calls on button click and inside any function

I am using fullcalendar.
When my page loads fullcalendar loads properly.
Now, I want to retrieve new data from table and want to display it on calendar.
For that, I call an ajax on button click, The ajax will retrieve the new data from table and display on fullcalendar.
But i am getting an error in firebug console.
TypeError: $(...).fullCalendar is not a function
It works when page will load, but when i used it in a function or any click event it wont works.
Here is my code. Please check it and suggest me.
<script>
$(document).ready(function() {
var today = new Date();
// This works because it calls on page load
$('#calendars').fullCalendar({
header: {
right: 'month,agendaWeek,agendaDay,prev,next today'
},
defaultDate: today,
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: {
url: 'fullcalendar/demos/php/get-events.php',
error: function(eee) {
$('#script-warning').show();
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
// This doesn't works because it calls on button click. It gives me TypeError: $(...).fullCalendar is not a function
$("#clickme").click(function(){
var timezone = localStorage.getItem("timezone");
var start = "2016-10-16";
var end = "2016-10-21";
$('#calendars').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: "fullcalendar/demos/php/get-events.php?mode=customdate&start=" + start + "&end=" + end,
type: 'json',
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
}
});
});
});
</script>
<div id='script-warning'>
<code>php/get-events.php</code> must be running.
</div>
<div id='loading'>loading...</div>
<div>
<div class="row" style="border-top:2px solid">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border-right:1px solid">
<div id='overviewDatePicker' style='margin-bottom:10px;margin-top:90px'></div>
<div><b>Filter By Eventname</b></div>
<div>
<input type="text" placeholder="Search"/>
</div>
<div><b>Filter By Stage</b></div>
<ul style="list-style:none">
<li><span class="glyphicon glyphicon-flag" style="margin:3px"></span>Tentative Booking</li>
<li><span class="glyphicon glyphicon-ok" style="margin:3px"></span>Complete Booking</li>
</ul>
<br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" id="eventcalendar">
<button id="clickme"> Click</button>
<div id="calendars"></div>
</div>
</div>
</div>

I have update my code according your code. Please check on click function where I have made changes modified you code accordingly and let me know outcome
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.css" />
<script>
$(document).ready(function() {
var today = new Date();
// This works because it calls on page load
$('#calendars').fullCalendar({
header: {
right: 'month,agendaWeek,agendaDay,prev,next today'
},
defaultDate: today,
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: {
url: 'fullcalendar/demos/php/get-events.php',
error: function(eee) {
$('#script-warning').show();
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
// Please check this part only
$("#clickme").click(function(){
var timezone = localStorage.getItem("timezone");
var start = "2016-10-16";
var end = "2016-10-21";
$.ajax({
url: "fullcalendar/demos/php/get-events.php?mode=customdate&start=" + start + "&end=" + end,
type: 'json',
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
//$("#calendars").fullCalendar('removeEvents'); //If you want to remove existing events from calender
$("#calendars").fullCalendar('addEventSource', events);
}
});
});
});
</script>
</head>
<body>
<div id='script-warning'>
<code>php/get-events.php</code> must be running.
</div>
<div id='loading'>loading...</div>
<div>
<div class="row" style="border-top:2px solid">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border-right:1px solid">
<div id='overviewDatePicker' style='margin-bottom:10px;margin-top:90px'></div>
<div><b>Filter By Eventname</b></div>
<div>
<input type="text" placeholder="Search"/>
</div>
<div><b>Filter By Stage</b></div>
<ul style="list-style:none">
<li><span class="glyphicon glyphicon-flag" style="margin:3px"></span>Tentative Booking</li>
<li><span class="glyphicon glyphicon-ok" style="margin:3px"></span>Complete Booking</li>
</ul>
<br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" id="eventcalendar">
<button id="clickme"> Click</button>
<div id="calendars"></div>
</div>
</div>
</div>
</body>
</html>

meteor saying Iron Router is unresolved with Intellij

I'm using Intellij and Meteor to make an application and I'm trying to use Iron Router to create multiple pages, but when I call the Router in the Javascript file, it says that Router is an unresolved variable and that route is an unresolved function or method. I've checked the meteor folder and it appears that all the Iron Router files loaded fine. At the bottom of the root page I am working on it says
Oops, looks like there's no route on the client or the server for url:
"http://localhost:3000/."
If I navigate to http://localhost:3000/about, which is the only page I have a route set up for yet, the page is blank, except for my nav bar.
Here is my javascript file...
Items = new Mongo.Collection("items");
Found_items = new Mongo.Collection("found_items");
Router.route('home', {path: '/'}); // Add this route
Router.route('about', {path: '/about'});
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
items: function () {
return Items.find({});
},
found_items: function () {
return Found_items.find({});
},
priceSum: function(){
var userItems = Found_items.find({
userId: this._id
}).fetch();
var prices = _.pluck(userItems, "price");
var totalTaxed = _.reduce(prices, function(sum, price){
var total = sum + parseFloat(price);
return total + (total * 0.04712);
}, 0);
return totalTaxed.toFixed(2);
},
calcTax: function () {
var userItems = Found_items.find({
userId: this._id
}).fetch();
var prices = _.pluck(userItems, "price");
var tax = _.reduce(prices, function(sum, price){
return (sum + parseFloat(price)) * 0.04712;
}, 0);
return tax.toFixed(2);
}
});
Template.body.events({
"submit .new-item": function (event) {
event.preventDefault();
var text = event.target.text.value;
Items.insert({
text: text,
createdAt: new Date(),
owner: Meteor.userId(),
username: Meteor.user().username
});
event.target.text.value = "";
}
});
Template.item.events({
"click .found": function (event, template) {
event.preventDefault();
var price = template.find('[name="price"]').value;
var text = template.find('.text').textContent;
Items.remove(this._id);
Found_items.insert({
text: text,
price: price
});
}
});
Template.body.events({
"click .remove": function(event) {
event.preventDefault();
Found_items.remove(this._id);
}
});
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY"
});
}
And here is the HTML file
<head>
<title>Grocery List</title>
</head>
<template name="home">
<body>
<div>
<ul class="menu">
<li class="menuItem">{{> loginButtons}}</li>
<li class="menuItem">Home </li>
<li class="menuItem">About</li>
</ul>
</div>
{{#if currentUser}}
<div class="container">
<header>
<h1 id="title">Grocery List</h1>
<form class="new-item">
<input type="text" name="text" placeholder="Type to add new items" />
</form>
</header>
<ul>
{{#each items}}
{{> item}}
{{/each}}
</ul>
</div>
<div class="container">
<header>
<h1>Items Found</h1>
</header>
<ul>
{{#each found_items}}
{{> found}}
{{/each}}
</ul>
</div>
<div class="container">
<header>
<h3>
Tax: ${{calcTax}}
</h3>
<h2>
Total: ${{priceSum}}
</h2>
<button class="save">Save list</button>
</header>
</div>
{{else}}
<h3>Please log in first.</h3>
{{/if}}
</body>
</template>
<template name="item">
<li>
<button class="found">Got it!</button>
<input type="number" name="price" placeholder="Sale Price" />
<span class="text">{{text}}</span>
</li>
</template>
<template name="found">
<li>
<button class="remove">×</button>
<span class="text">{{text}}</span>
<span class="price">{{price}}</span>
</li>
</template>
<template name="about">
<head>
<title>About Grocery List</title>
</head>
<body>
<div>
<ul class="menu">
<li class="menuItem">{{> loginButtons}}</li>
<li class="menuItem">Home </li>
<li class="menuItem">About</li>
</ul>
</div>
<div class="container">
<header><h1>About</h1></header>
<p>This application was created using Meteor. It can be used to make, save and update grocery lists. Once the user is in the store, they can use it to check off items on the list, put in the price and see the total, with tax.<br>
Users can also save their previous lists to either reuse them, or compare current prices to previous ones.<br>
Future implementations of this page would also allow the user to change the tax rate depending on their location, and include coupons and other discounts in the pricing.</p>
</div>
</body>
</template>

Always add a route for the root.
Items = new Mongo.Collection("items");
Found_items = new Mongo.Collection("found_items");
Router.route('home', {path: '/'}); // Add this route
Router.route('about', {path: '/about'});
BTW, you have a head and body section within your template. That is rendered but does not have an effect in your browser.
Use the following syntax with IR's template helper pathFor:
<ul class="menu">
<li class="menuItem">{{> loginButtons}}</li>
<li class="menuItem">Home</li>
<li class="menuItem">About</li>
</ul>
In order to get your code working, I also fixed a couple of issues:
Removed head and body tags in templates.
Renamed Template.body.helpers to Template.home.helpers.
Renamed Template.body.events to Template.home.events.
Now it is adding new items to the collection and showing items.

you have to add a route with / to call localhost:3000
routing example
Router.configure({
layoutTemplate: 'layout',
});
Router.route('/', function () {
this.render('home');
},{
name: 'home'
});
Router.route('/about', function () {
this.render('about');
},{
name: 'about'
});
html
<template name="layout">
{{> yield}}
</template>
<template name="home">
<p>i am the homepage</p>
</template>
<template name="about">
<p>i am the about page</p>
</template>

Develop Reference

JavaScript is the programming language of the Web.

Set a fullcalendar with meteor.js - javascript

Related

Why won't my delete item event emit to the parent?

Add events in fullcalendar with meteor

How do I access object values in various elements to display event data?

fullcalnder not calls on button click and inside any function

meteor saying Iron Router is unresolved with Intellij

Categories

Resources