Is there a way to generate a page like this (see below) in Ghost? There is a static HTML table at the bottom that shows a week of radio shows.
At the top, there are two boxes which are dynamic. The box on the left shows the current radio show (or a ‘nothing playing’ message if nothing is scheduled). The box on the right shows the next scheduled show.
The static table looks perfectly possible either with the HTML card and markup or with the Markdown card and Markdown tables. As for the dynamic radio shows you’ll have to use JavaScript on the client to calculate the time and render the relevant show and next show. I’d probably keep the schedule static and then use JavaScript to grab the current and next shows and render them above the main content.
Is there an API to work out what current radio show is playing? Or is it all based on time?
Hi David thanks for coming back to me.
Markdown for the table sounds viable.
There’s no API at the moment. Currently this is done in Wordpress using a combination of a plugin (for the what’s now/what’s next) and a manual table (because the plugin’s table rendering is fairly hopeless).
I’m fairly (i.e. very) basic when it comes to JavaScript - I can usually get things going if I base it on something else, but wouldn’t know where to start if coding from scratch. Any hints?
many thanks
I could see how this would work, and could throw some JavaScript code together, however it’s not a short task. It’s something I’d would probably pay someone to implement, which explains why it was wrapped up in a plugin in WordPress. Is that an option for yourself?
Thanks for the thinking! This is a side project so not possible to pay at the moment.
I found FullCalendar.io which would be a bit of a different approach. https://fullcalendar.io/#demos
I have managed to get it working on a local ghost install apart from CSS. I think Ghost’s global.css is over-riding the fullcalendar CSS, so am trying to pin down whether that theory is correct or not at the moment,
Looks pretty cool! Though I wonder that if you’re ok with not matching the design then maybe using some kind of embed would be best? Maybe even a Google Calendar would work Add a Google calendar to your website - Google Calendar Help
It would be a pretty good way to manage timed events 
I had a look at the Google embed, but it’s kinda too clunky looking. Also not keen on an iframe if I can avoid. The FullCalendar has a lot of inbuilt theme examples (its one of the demos) so I think the styling will work.
Just grappling with the way that the Ghost CSS seems to be overpowering the FullCalendar CSS… The googling I’ve done is leading me to believe that this isn’t a common problem out there, so perhaps my diagnosis is wrong.
It’ll be down to some kind of selector and/or default styling. You might be able to scope the CSS for calendar with an extra wrapping element or class. While this might seem unique to Ghost this is a very common encounter in general front-end web development. CSS is great because it can get almost anywhere, but CSS is also annoying because it can almost get anywhere 
Thanks, will give it a go. I was hoping to pull the FullCalendar css in from a cdn, but I guess that isn’t going to work if I need to tweak it.
Oh no you can definitely do that. If you use their CSS from their CDN as a basis you can overwrite it with your own so you can customise the look for your needs 
My problem is that (I think) there’s a lot of resetting going on in Ghost’s global.css that is over-riding the FullCalendar css. I might have to augment a lot of the FullCalendar css to get things working - unless there’s an easier way.
As I was typing that I realised the way to do approach it! Am going back into the code…
Awesome, happy coding 
