Heavily customized version of smokesignal - https://whtwnd.com/kayrozen.com/3lpwe4ymowg2t
kayrozen.com
1<div class="bookmark-calendar-container">
2 <div class="columns">
3 <div class="column">
4 <!-- Timeline View -->
5 <div class="timeline-container" id="timeline-container">
6 {% if events %}
7 <div class="timeline">
8 {% for bookmarked_event in events %}
9 <div class="timeline-item">
10 <div class="timeline-marker is-icon">
11 <i class="fas fa-bookmark" style="color: #ff6b6b;"></i>
12 </div>
13 <div class="timeline-content">
14 <div class="event-card box">
15 {% if bookmarked_event.bookmark.tags %}
16 <div class="tags mb-3">
17 {% for tag in bookmarked_event.bookmark.tags %}
18 <span class="tag is-primary is-small">{{ tag }}</span>
19 {% endfor %}
20 </div>
21 {% endif %}
22
23 <h5 class="title is-5">{{ bookmarked_event.event_details.name }}</h5>
24 {% if bookmarked_event.event_details.description %}
25 <p class="content">{{ bookmarked_event.event_details.description }}</p>
26 {% endif %}
27
28 {% if bookmarked_event.starts_at_human or bookmarked_event.event_details.starts_at %}
29 <p class="has-text-grey">
30 <span class="icon">
31 <i class="fas fa-calendar"></i>
32 </span>
33 {{ t("event-date") }}: {{ bookmarked_event.starts_at_human | default(bookmarked_event.event_details.starts_at) }}
34 </p>
35 {% endif %}
36
37 <div class="buttons">
38 <a href="/{{ bookmarked_event.event.did }}/{{ bookmarked_event.event_rkey }}" class="button is-small is-primary">
39 {{ t("view-event") }}
40 </a>
41 <button class="button is-small is-danger is-outlined"
42 onclick="removeBookmarkFromTimeline(this)"
43 data-event-aturi="{{ bookmarked_event.bookmark.event_aturi }}">
44 <span class="icon">
45 <i class="fas fa-trash"></i>
46 </span>
47 <span>{{ t("remove-bookmark") }}</span>
48 </button>
49 </div>
50 </div>
51 </div>
52 </div>
53 {% endfor %}
54 </div>
55 {% else %}
56 <div class="has-text-centered py-6">
57 <span class="icon is-large has-text-grey-light">
58 <i class="fas fa-calendar-times fa-3x"></i>
59 </span>
60 <p class="title is-4 has-text-grey">{{ t("no-bookmarked-events") }}</p>
61 <p class="subtitle has-text-grey">{{ t("start-bookmarking-events") }}</p>
62 </div>
63 {% endif %}
64 </div>
65 </div>
66 <div class="column">
67 <div class="is-pulled-right">
68 {% include 'mini_calendar.html' %}
69 <!-- Pass events data to mini calendar -->
70 <script>
71 window.bookmarkedEventDates = [
72 {% if events %}
73 {% for bookmarked_event in events %}
74 {% if bookmarked_event.event_details.starts_at %}
75 '{{ bookmarked_event.event_details.starts_at }}'.split('T')[0],
76 {% endif %}
77 {% endfor %}
78 {% endif %}
79 ];
80 console.log('Setting bookmarked dates:', window.bookmarkedEventDates);
81 </script>
82 </div>
83 </div>
84 </div>
85</div>