Federico Silva Armas: Building a Shared Calendar [Part 2]: Render the calendar using the vash template engine

I chose express.js as the web framework mainly because I have experience with it. After running the express generator the first order of business was to setup a route to render a page that would host the google calendar.

I like the vash template engine because it uses the Razor syntax that I am accustomed to coming from ASP.NET. After installing vash, configure it as the default view engine:

var express = require('express');
var app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'vash');

There is nothing interesting to look at in the route, but I include it here so that you can see how the pieces are hooked up together:

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
    res.render('index');
});

Express will try to find template files with the .vash extension within the 'views' folder. For example, here is a simplified layout template:

<html>
    <body>
        <div class="o-container o-container--xlarge">
            @html.block("content")
        </div>
    </body>
</html>

And the view can reference it to plug in the html for the content placeholder:

@html.extend('layout', function(model) {
    @html.block('content', function(model) {
            <iframe class="calendar"
                src="https://calendar.google.com/calendar/embed?......."
                frameborder="0"></iframe>
    })
})

You can get the markup for the iFrame from Google Calendar which allows you to easily render a calendar in your own site.

Source code is available at bitbucket or you can play with the live test site.

Federico Silva Armas

Pages

Thursday, December 1, 2016

Building a Shared Calendar [Part 2]: Render the calendar using the vash template engine

No comments:

Post a Comment