Calendar view?


#1

Has anyone built, seen, or used a calendar plugin for blog posts? I don’t mean like google calendar, or full on event integration, but like a list template that’s formatted to look like a calendar.

I checked out full calendar and it’s an option, but I feel like with some css and js, the functionality could be a list view.

Just thought I’d ask! :smiley:


#2

@justrjlewis Not sure if this is exactly what you’re looking for, but perhaps it might be a springboard for some inspiration…

https://codyhouse.co/gem/schedule-template/


#3

Hey thanks!

This does look like a good starting point!
I found a couple of others on codepen as well: http://codepen.io/ovdojoey/pen/GqRxYQ
and http://codepen.io/iraycd/pen/Durab


#4

It would be interesting to see such a calendar based on a data file that contains a bunch of appointments with a timestamp, title and description.

I assume, most plugins use a JSON object as data source. Hugo could generate a JSON file (or use a .json data file directly) that could be fetched by the calender plugin.


#5

That’s how I was thinking that I should implement this. Since I plan on using a CMS layer I was thinking I could just use the cms config to create data files for each post to use for the calendar, but having Hugo generate those files (maybe an optional configuration) seems like it could have many applications.


#6

Would it be possible to use range? I’m working on a project to have a calendar with just date numbers (no content squares) that are modified when there is a post(s) published on that date (with a cross out, for instance). Clicking on that date would then list all the posts published on that date.

Perhaps ranging over posts where date published = date for each date could work, but seems very inefficient. I’m not sure about having a separate datafile for each of my posts. Plus, frontmatter can be written in JSON so could be pulled rather than a datafile if that is more appropriate.


#7

Revisited this over the weekend. Does a range over posts and prints each date number for the month.
Mixed it in with some Bootstrap to give me a grid, obviously any grid would work.
Defined .Site.Params.Date### to be certain dateforms .DateCal is just “2” and .DateMonth is “January”

{{ range .Site.Pages.Reverse }}
  {{ if eq .Section "days" }}
	{{ if eq ( dateFormat .Site.Params.DateCal .Date ) "1" }}
		<div class="row text-center">
			<h3>{{ dateFormat .Site.Params.DateMonth .Date }}</h3>
		</div>
	{{ end }}
	<a href="{{ .Permalink }}">
        <div class="col-md-2 col-sm-3 col-xs-4">
	<p class="text-center">
		<strong>{{ dateFormat .Site.Params.DateCal .Date }}</strong>
	</p>
	</div></a>
	<!-- Month dividers -->
	{{ if .NextInSection }}
		{{ $.Scratch.Set "currentMonth" (dateFormat .Site.Params.DateMonth .Date) }}
		{{ $.Scratch.Set "nextMonth" (dateFormat .Site.Params.DateMonth .NextInSection.Date )}}
		{{ if ne ($.Scratch.Get "currentMonth") ($.Scratch.Get "nextMonth")}}
			<div class="clearfix"></div>
		{{ end }}
	{{ end }} 
  {{ end }}
  <!-- /Month Dividers -->
{{ end }}

In my use case, my dates and text get coloured according to post .Params, hence the colours in my screenshot. The current date is yellow.

This is split into a partial and called twice depending on what month it is. ({{ if lt (dateFormat .Site.Params.DateMonthNum .Date) 3 }})
The idea is for January-June in the first column and July-December in the second, but I’ll get that done later.


#8

Hey @samozzy,

Very inspiring work. Unfortunately your snippet did not work in my quick test and ended up with an error regarding pagination. That led me to create my own version of this functionality I named Activity Calendar.

Example usage:

{{ partial "calendar" (dict "context" . "from" 2016 "fromMonth" 10 "to" (now.Format "2006") "toMonth" (now.Format "1") "pages" .Site.Pages) }}

If someone is interested in I’ve wrote a small article explaining the way I created the Activity Calendar - of course with all the source code freely available.

Thanks again for your work - I’ve learned a lot :slightly_smiling:


#9

Very nice!


#10

@rwi I cannot get this to work I’m afraid.

I have tried it out with the Hyde theme and 5 posts.

If I follow your instructions to the letter I always get an empty page under the taxonomy /archive/

If I place the calendar partial in a terms.html under /_default/ the calendar gets rendered but the day links for individual posts are not generated.

The template archive.html under /layouts/taxonomy/ does not seem to register…

Do you have a repo with your demo so that I can see how you got your demo rendered with Hugo?

EDIT [16 July 2017]
Never mind. I found why the daily links were not generated.

For anyone else who hits the same roadblock PublishDate is a required frontmatter parameter for the links to be generated.


#11

@onedrawingperday - sorry for my veery late response, I was off from Hugo Projects for a while and did not notice your feedback.

As an addition for your “Necessary to have PublishDate” - This is because of the grouping in the calendar.html-Partial:


{{ range ($pages.GroupByPublishDate "2006") }}
    {{ $context.Scratch.SetInMap "ArticlesPerYear" .Key (len .Pages) }}
{{ end }}

{{ range ($pages.GroupByPublishDate "2006-01") }}
    {{ $context.Scratch.SetInMap "ArticlesPerMonth" .Key (len .Pages) }}
{{ end }}

{{ range ($pages.GroupByPublishDate "2006-01-02") }}
    {{ $context.Scratch.SetInMap "ArticlesPerDay" .Key (len .Pages) }}
{{ end }}

I think this GroupByPublishDate you can also change to GroupByDate and get it work. But notice, when you have multiple articles with future dates, they will appear as well.


#12

I’m doing this here: https://www.islandviewpta.org/event/

Here is an example ‘Event’ post.

Here is the layout that loads the ‘Monthly’ calendar javascript and passes the json data source.

Here is the json file generator that I use to build the data file from my event posts.

Feel free to poke around the repository and take what you like.


#13

A word of caution for anyone using this calendar partial.

It kind of breaks permalinks configuration in config.toml

In my case I was not able to render posts from a section in the home page.

See here for a better description of the problem I experienced.

Removing the calendar view partial restored the proper permalinks configuration for me.