Pinboard style events

[spd1954]

I'd like to add a page of events that a t like a calendar but in a pinboard style. It would be nice not to have to edit the page each time an event finishes or to add a new event.
Any pointers or links would be great and I know there's Tockify if you pay but would prefer a free solution.

Thanks

[Acorn]

It could probably all be done in Xara.

Say you had a page with twelve Pin slots, 4x3.
These would be empty IFRAMEs.

You can create a Pinboard Template can use that to create a collection of Pins.
Each Pin would be same as a single XAR/WEB file and given a unique filename, probably based around a YYYYMMDD - subject.web (or .xar) filename.
These would be published into the same Pin folder on your server.

All you need then change is a control file.
I would make this up as a JS object with each entry :

var pins = [
{"pin01", "YYYYMMDD - subject.web"},
{"pin02", "..."},
...
{"pin12", "..."}
]

Finally, back on the Pinboard, you would need some JavaScript load in the JS object - Head : <script src="PinBoard.js"></script>
and to put the right Pin File into the right Slot - Body: ...

All you then edit is the PinBoard.js file.

Acorn

[Acorn]

It can all be done in Xara.
Pinboard.zip
Unzip to a local folder and run the XAR.
Preview.
In the PinBoard.js file, rearrange some of the entries; all end with a comma, apart from the last one. Save.
Refresh the Preview.

In production, all of the PinBoard pages would be XAR files in their own right and would publish with any filename you like, just not index.
If you had a year's worth of pins, you could instead save them all in one file.
Change the PinBoard.js file to match to the new filenames.
You can publish as many new PinBoards as you like.
To display any, just change the PinBoard.js file detail.

For a variant, you probably need to duplicate the PinBoard.js file and change the Classname of the PinBoards.
You could instead double the PinBoard.js entries if you were going to display all twelve in the Variant.

Acorn

[Initiostar]

Slightly different approach; looked at the OP's reference to Tockify > https://tockify.com/ and tried to mirror the visuals > https://initiostar.co.uk/demo/calendar_template/

Tockify uses tags to select event categories which could be achieved by giving each category a class name and using a jQuery hide and show by class name; didn't venture this far and of course one could simply embed a Tockify or a Google calendar into Xara anyway.

Most interesting bit was using a combined push and clone function for duplication and the stretch function that is available in Names (Pro & Pro+)

Event Templates.xar

I find it easy to forget how many goodies there are in Xara, even in Pro v19

[Acorn]

@Gary, the OP did not really want to republish the website page for any changes.

Your idea of tagging would work if there were lots of events.
Currently, the code to display the PinBoards is very simple and is checking for a ClassName of 'pinboard':

<script>
var pb = pins.length;
var pinset = document.getElementsByClassName('pinboard');
for (var i=0; i<pb; i++) {
  pinset[i].src = pins[i];
}
</script>

If you set up the ClassName of a Pinboard to be extensible 'pinboard Y23M10 Y23Q4 Festival Family Free', you could include buttons to alter the pinset variable to filter the selection.
A Christmas event might be 'pinboard 23Q4 Christmas' returning all Christmas activities and those in the last three months of the year.

Certainly the makings of an Amazon-style listing page...

Acorn