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.
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.
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.
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.
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.
@alexandros - 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.