Using Algolia for an events calendar

Hi all,
I’ve been using Algolia for a little over a week and I’m finding it really great. I’m using it for a filtered list of courses but something that’s struck me is that it would be really nice to use it on an array of ‘events’ i.e. lectures, tours, gigs etc.

I can get all of our events into a single JSON file and can also stamp them with a unix date. I can also output the date as a text in the JSON e.g. ‘Jan 2019’ or ‘Thursday, January 23 2021’ etc.

Has anyone tried using Algolia for a list of events? I guess I could use the text ‘Jan 2019’ dates as facets but my question…

  • I’m a little unsure as to how I could order the faceted dates i.e. ‘Jan’, ‘Feb’ isn’t alphabetical There would be the year to contend with too of course.

Any pointers would be great. I’ll post back if I figure something out in the meantime.

Thanks,
Chris.

1 Like

Hi Chris,

Thanks for asking this here. I’m working in the exact same problem right now.

Can you detail what you’d like as an end result? I understand that you want dates as a facet, and you intend to have checkboxes. With Algolia you cannot have a value and a display name for the facets but you ca use the transformData` method documented here https://community.algolia.com/instantsearch.js/documentation/#refinementlist

I think you should have something like date: 20170902 in your records, and then you convert this number to a nice date before it’s displayed.

Would you like a calendar widget, so you’re able to find results on a date range? we don’t provide that today but I would like to have this ^^.

I’ll update this thread if I find more. Please keep us updated as well.

Julien

What also is a valid strategy to deal with dates in Algolia is using timestamps. By using a timestamp you can use a range widget, and thus consider it as a number, while showing it as a new Date(t).toLocaleString.

Does that help a bit?

Hey both,
Thanks so much for getting back on this.
From a straightforward UX point of view, I think we’d have

a) an instantsearch input box for the text search
b) a start and end date field (2 x calendar date picker drop down perhaps).
c) facets to filter the events by category

So after thinking it through, we wouldn’t need buttons/checkbox’s etc for each month.

I’m thinking that if we have two date pickers (one for start, one for end) then I can tie their values (using VueJS or such like) to the numericRefinementList start and end.

The trick would probably be making the date picker convert to unix timestamp (moment.js may make that easier).

Sound like I’m following a good path or not?

Thanks again,
Chris

PS here’s my test JSON: https://www.keele.ac.uk/json/events/index.json and here’s a basic fiddle with Date, toLocaleString and moment.js https://jsfiddle.net/bearduk/2tg4yswn/

1 Like

Sounds like a good path to me :slight_smile:

1 Like

Hi guys,
Just looking at this and trying to set the range for start and end date. I was hoping that filters would be a good way to get the initial range set but it’s not working.

const search = instantsearch({
  appId: 'xzx',
  apiKey: 'xzx',
  indexName: 'dev_EVENTS',
  urlSync: true,
  filters: 'unixStartDate: 1395446400 TO 1453420800'  
});

Is there a way to set this initial date range?

If I can get this initial numerical range set I’ll then be able to hook up the date pickers to them.

I can see that instantsearch has a widget for price, but not a user enterable number range. If it’s not possible in instantsearch, is there a filter start end in the normal JS API? I guess this is the answer! :slight_smile:

So for what I need, do you think I’d be best going down the API route (and perhaps I can then use VueJS to hook in the date pickers).

Will keep looking… :mag:

Thanks,
Chris.

PS I have set unixStartDate as an ‘attribute for faceting’ in the Display Settings of Algolia.

Hey,
Date range working: https://github.com/bearduk/vue-cli-algolia
Just need to plug in Moment.JS

Cheers