eventCreate.html

<template name="eventCreate">

    <div class="ui main container">

        <h2 class="ui dividing header">Event Creation</h2>

        <div class="ui ten wide column">

            <form class="ui form" id="createEventForm">

                <div class="field">
                    <label>Event Name:</label>
                    <input type="text" name="name" placeholder="Name...">
                </div>

                <div class="field">
                    <label>Event Description:</label>
                    <input type="text" name="desc" placeholder="Brief Description...">
                </div>

                <div class="two fields">
                    <div class="field">
                        <label>Begin Date/Time:</label>
                        <input class="ui dropdown datetimepicker" name="begin" type="text"/>
                    </div>
                    <div class="field">
                        <label>End Date/Time:</label>
                        <input class="ui dropdown datetimepicker" name="end" type="text"/>
                    </div>
                </div>

                <div class="ui error message"></div>

                <button class="ui vertical large green animated button" type="submit" tabindex="0">
                    <div class="visible content">Create Event</div>
                    <div class="hidden content">
                        <i class="right arrow icon"></i>
                    </div>
                </button>

            </form>
        </div>

    </div>

</template>

eventCreate.js

Template.eventCreate.onRendered(function() {
    $('.datetimepicker').datetimepicker({
        sideBySide: true
    });

    // Semantic validation (client side)
    $('#createEventForm').form({

        fields: {

            name: {
                identifier: 'name',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'You must enter an event name!',
                    }
                ]
            },

            desc: {
                identifier: 'desc',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'You must enter an event description!'
                    }
                ]
            },

            begin: {
                identifier: 'begin',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'You must have a beginning date/time!'
                    }
                ]
            },

            end: {
                identifier: 'end',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'You must have an ending date/time!'
                    }
                ]
            }
        },
        on: 'blur',
        inline: 'true'
    });

    toastr.options = {
        "closeButton": false,
        "debug": false,
        "newestOnTop": false,
        "progressBar": false,
        "positionClass": "toast-top-center",
        "preventDuplicates": false,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };

    console.log("eC rendered");

});

Template.eventCreate.events({

    'submit form': function(event) {

        // Gather data from the form
        var name = $("#createEventForm").form('get value', 'name');
        var desc = $("#createEventForm").form('get value', 'desc');
        var begin = new Date($("#createEventForm").form('get value', 'begin'));
        var end = new Date($("#createEventForm").form('get value', 'end'));

        // Build document from fields
        var eventDoc = {
            owner: Meteor.userId(),
            name: name,
            desc: desc,
            begin: begin,
            end: end,
        };

        // Add the event to the database!
        Meteor.call("createEvent", eventDoc, function(err, result) {
            if (err && err.error) {
                toastr.error("Error adding event to database: " + err.error);
            } else {
                toastr.success("Successfully added event to database. ID: " + result, "Success!");
            }
        });

        event.preventDefault();
    }

});

layout.html

<template name="layout">

    <!-- Nav Menu -->
    {{> Template.dynamic template=nav}}

    <!-- Rest of page -->
    {{> Template.dynamic template=main}}

</template>

router.js

// #################
// # CONFIGURATION #
// #################

// UserAccounts Routing
AccountsTemplates.configureRoute('signIn', {
    name: 'signin',
    path: '/signin',
    layoutTemplate: 'layout',
    layoutRegions: {
        nav: 'navigation'
    },
    contentRegion: 'main'
});

AccountsTemplates.configureRoute('changePwd', {
    name: 'changePwd',
    path: '/account/change-password',
    layoutTemplate: 'layout',
    layoutRegions: {
        nav: 'navigation'
    },
    contentRegion: 'main'
});

// Ensure signin on routes that require it
FlowRouter.triggers.enter([AccountsTemplates.ensureSignedIn], {
    except: ["home", "atSignIn", "tos"]
});



// ##########
// # GROUPS #
// ##########
var eventsRoutes = FlowRouter.group({
    prefix: '/events',
    name: 'userEvents'
});

var accountRoutes = FlowRouter.group({
    prefix: '/account',
    name: 'account'
});




// ##################
// # GENERAL ROUTES #
// ##################

// Front page
FlowRouter.route('/', {
    name: 'home',
    action: function() {
        BlazeLayout.render('layout', {
            nav: 'navigation',
            main: 'home'
        });
    }
});

// Terms of Service (UserAccounts)
FlowRouter.route('/tos', {
    name: 'tos',
    action: function() {
        BlazeLayout.render('layout', {
            nav: 'navigation',
            main: 'termsOfService'
        });
    }
});



// ##################
// # ACCOUNT ROUTES #
// ##################

// Profile Editor
accountRoutes.route('/profile', {
    name: 'editProfile',
    action: function() {
        BlazeLayout.render('layout', {
            nav: 'navigation',
            main: 'editProfile'
        });
    }
});

// Events Management (List/Add)
accountRoutes.route('/events', {
    name: 'accountEvents',
    action: function() {
        BlazeLayout.render('layout', {
            nav: 'navigation',
            main: 'accountEvents'
        });
    }
});


// ################
// # EVENT ROUTES #
// ################

eventsRoutes.route('/:_id', {
    name: 'eventView',
    action: function(params) {
        BlazeLayout.render('layout', {
            nav: 'navigation',
            main: 'eventView'
        });
    }
});

eventsRoutes.route('/create', {
    name: 'eventCreate',
    triggersEnter: [
        function(context, redirect) {
            console.log("running /events/create trigger");
        }
    ],
    action: function() {
        BlazeLayout.render('layout', {
            nav: 'navigation',
            main: 'eventCreate'
        });
    }
});