Svelte Event Schedule - Flowbite Svelte Blocks

Get started with a collection of website sections coded with Tailwind CSS to show the schedule of an event inside a timeline featuring a title, speaker, and description.

Default event schedule #

Use this free example to show a list of workshops for an event using a timeline component and featuring the time and title of the presentation.

  • Svelte
<script lang="ts">import { Section, Schedule, ScheduleItem } from "flowbite-svelte-blocks";
const schedule = [
  {
    time: "08:00 - 09:00",
    href: "/",
    title: "Opening remarks"
  },
  {
    time: "09:00 - 10:00",
    href: "/",
    title: "Bergside LLC: Controlling the video traffic flows"
  },
  {
    time: "10:00 - 11:00",
    href: "/",
    title: "Flowbite - An Open Framework for Forensic Watermarking"
  },
  {
    time: "11:00 - 12:00",
    href: "/",
    title: "Coffee Break"
  },
  {
    time: "12:00 - 13:00",
    href: "/",
    title: "Scaling your brand from \u20AC0 to multimillion euros"
  },
  {
    time: "13:00 - 14:00",
    href: "/",
    title: "Updates from the Open Source Multimedia community"
  },
  {
    time: "14:00 - 15:00",
    href: "/",
    title: "Exploring the balance between customer acquisition and retention"
  }
];
</script>

<Section name="schedule" sectionClass="bg-white dark:bg-gray-900 antialiased">
  <Schedule scheduleName="Schedule">
    <div class="mt-4" slot="subtitle">
      <a href="/" title="" class="inline-flex items-center text-lg font-medium text-primary-600 hover:underline dark:text-primary-500">
        Learn more about our agenda
        <svg aria-hidden="true" class="w-5 h-5 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
    {#each schedule as item}
      <ScheduleItem {item} />
    {/each}
  </Schedule>
</Section>

Component data