![]() Note that there are more size options in _original, below, if required. If there is no image available, the brand emblem will display. The event image URL - set it as the :src attribute on an element to display your event image. Try ('LL') to get the date, or ('LT') to get the time. The event end date and time, as a Day.js object. ![]() Use this with an x-html attribute instead of x-text. The event description, in HTML format, ready to drop into a text element. This is the URL of your church branding emblem image - it will be the same on every event, but you can incorporate it into your design if you would like. This is a list of data keys you can use for each event.Ī boolean variable as to whether an event lasts all day - you may want to style it differently, like in our example! To set your ChurchSuite embedded sections to use a particular locale, add an extra command in your next to where you defined your ChurchSuite URL - the default locale is 'en', but other locales available are 'da', 'de', 'es', 'fr', 'it', 'nl', 'pl', 'se' and 'sk'. Almost all of the data comes straight from your ChurchSuite account, so will already be in whichever language you use, but any dates or times can also be localised. It doesn't do anything functionally, so you could remove it and use standard CSS if you like!ĬhurchSuite supports a number of languages, and so does our Embed script. Any of the options listed, including preset localised formats (see localisation for more information) are available for your use.Īll the classes you see in our code with strange names like w-60 or font-bold - that's Tailwind CSS. Simply use the format function on an event.start or event.end property to format it however you would like - check out the Day.js docs for a list of format options. Our script comes bundled with Day.js for fully flexible styling of dates and times. ![]() For a full list of information keys you can use, see below. For the event link, create an anchor element () with an :href="event.link" attribute - note the colon! Similarly for images, create an element and add a :src="event.image" attribute. Wherever you want text information about the event, such as name or location, simply create a text element (such as a or ) and give it an x-text attribute - when the template runs, it will fill in the information for each event. Add the Alpine x-for attribute (shown below in yellow) to the template, and when the page loads it will repeat the template for each event (or each event matching the search or category filters, if you are using them!). This works using Alpine and templates.Ĭreate a template element containing the styled HTML for a single element card - in our example, we have the event image with details below, all wrapped in an anchor element so that it becomes a clickable link to the signup page. The final piece of the puzzle is styling each event to match your website design. You'll notice that in our example, we're only showing Featured events, but you may also want to explore merge strategies or other filters. You can also send extra URL parameters to the ChurchSuite API by passing them into CSEvents - check out our GitHub repo for available parameters. This comes from Alpine, but allows you to access all of your ChurchSuite feed data in any child elements. We cache the event data locally for a short period, so if you've recently updated an event on ChurchSuite and aren't seeing the changes in the browser, try clearing your browser's local storage!Īdd an x-data attribute to the outer container (in this case, a div element) of your ChurchSuite section. These are best placed in the head, but if you don't have access to the head, you can also put them in the body before your code.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |