how to display only current list entries?
-
Hi,
I like to show only the currents events in a list on my website. I mean, only the events that take place right now.
Is there a way to realize this with CSS?Example:
It is 12:00 o’clock.Event 1: Start 08:00 , End: 11:00 -> not displayed
Event 2: Start 11:00 , End: 13:00 -> displayed
Event 3: Start 13:00 , End: 14:00 -> not displayedHere is my shortcode so far:
[ics_calendar url="https://calendar.google.com/calendar/ical/notdienstring.tbb%40gmail.com/public/basic.ics" view="list" format="l j." limitdays="1" showendtimes="true" title="false" eventdesc="true" hiderecurrence="true"]
Any help would be appreciated.
Thanks-
This topic was modified 2 years, 3 months ago by
rs71.
-
This topic was modified 2 years, 3 months ago by
-
There is not really a way to do this, at least not as the plugin is currently designed.
Each event has a CSS class that contains its start time, in the format thhmmss, so for instance, an event that starts at 11:00 AM would have the CSS class
.t110000
, but there’s no end time class. You would need that to reliably achieve what you’re trying to do.It’s an interesting idea… I’ll put this on my to-do list for a future update.
Thank you for your answer. It would be great if you can make it happen.
I made a quick and dirty modification of your calendar-list.php on my testwebsite. It works, but I don’t want to use it in production environment, because it would be overwritten by your frequent releases. ??
And, of course, it has no parameter to switch it on or off. ??See my amateurish modifications below. Feel free to use it, if it helps.
Cheers
Btw: Amazing responsetime!
<?php // Require object if (empty($ics_data)) { return false; } global $R34ICS; global $wp_locale; $start_of_week = get_option('start_of_week', 0); $date_format = r34ics_date_format($args['format']); $ics_calendar_classes = apply_filters('r34ics_calendar_classes', null, $args, true); // Feed colors custom CSS if (!empty($ics_data['colors'])) { r34ics_feed_colors_css($ics_data, true); } // Prepare event details toggle lightbox if ($args['toggle'] === 'lightbox') { r34ics_lightbox_container(); } ?> <section class="<?php echo esc_attr($ics_calendar_classes); ?>" id="<?php echo esc_attr($ics_data['guid']); ?>"> <?php // Title and description if (!empty($ics_data['title'])) { ?> <h2 class="ics-calendar-title"><?php echo wp_kses_post($ics_data['title']); ?></h2> <?php } if (!empty($ics_data['description'])) { ?> <p class="ics-calendar-description"><?php echo wp_kses_post($ics_data['description']); ?></p> <?php } // Empty calendar message if (empty($ics_data['events']) || r34ics_is_empty_array($ics_data['events'])) { $current_event_found = false; } // Display calendar else { // Actions before rendering calendar wrapper (can include additional template output) do_action('r34ics_display_calendar_before_wrapper', $view, $args, $ics_data); // Color code key if (empty($args['legendposition']) || $args['legendposition'] == 'above') { echo $R34ICS->color_key_html($args, $ics_data); } // Build monthly calendars $i = 0; $skip_i = 0; $multiday_events_used = array(); $years = $ics_data['events']; // Reverse? if ($args['reverse']) { krsort($years); } foreach ((array)$years as $year => $months) { // Reverse? if ($args['reverse']) { krsort($months); } foreach ((array)$months as $month => $days) { $ym = $year . $month; // Is this month in range? If not, skip to the next if (!r34ics_month_in_range($ym, $ics_data)) { continue; } $m = intval($month); $month_label = ucwords(r34ics_date($args['formatmonthyear'], $m.'/1/'.$year)); $month_label_shown = false; $month_uid = $ics_data['guid'] . '-' . $ym; // Build month's calendar if (isset($days)) { // Reverse? if ($args['reverse']) { krsort($days); } ?> <article class="ics-calendar-list-wrapper" data-year-month="<?php echo esc_attr($ym); ?>"> <?php foreach ((array)$days as $day => $day_events) { // Pull out multi-day events and display them separately first foreach ((array)$day_events as $time => $events) { foreach ((array)$events as $event_key => $event) { // We're ONLY looking for multiday events right now if (empty($event['multiday'])) { continue; } // Give this instance its own unique ID, since multiple instances of a recurring event will have the same UID $multiday_instance_uid = $event['uid'] . '-' . $event['multiday']['start_date']; // Skip event if under the skip limit (but be sure to count it in $multiday_events_used!) if (!empty($args['skip']) && $skip_i < $args['skip']) { if (!in_array($multiday_instance_uid, $multiday_events_used)) { $multiday_events_used[] = $multiday_instance_uid; $skip_i++; } continue; } // Have we used this event yet? if (!in_array($multiday_instance_uid, $multiday_events_used)) { // Format date/time for header /* Version 9.6.5.1 revises the change from version 9.6.3.2: Restructured into MM/DD/YYYY format because, for an unknown reason, both wp_date() and r34ics_date() are shifting these back by 1 day if in YYYYMMDD format. */ $md_start = !empty($event['multiday']['start_date']) ? r34ics_date($date_format, substr($event['multiday']['start_date'],4,2) . '/' . substr($event['multiday']['start_date'],6,2) . '/' . substr($event['multiday']['start_date'],0,4) ) : ''; $md_end = !empty($event['multiday']['end_date']) ? r34ics_date($date_format, substr($event['multiday']['end_date'],4,2) . '/' . substr($event['multiday']['end_date'],6,2) . '/' . substr($event['multiday']['end_date'],0,4) ) : ''; if ($time != 'all-day') { $md_start .= ' <small class="time-inline">' . r34ics_time_format($event['multiday']['start_time']) . '</small>'; $md_end .= ' <small class="time-inline">' . r34ics_time_format($event['multiday']['end_time']) . '</small>'; } // Display month label if needed if (empty($args['nomonthheaders']) && empty($month_label_shown)) { ?> <h3 class="ics-calendar-label" id="<?php echo esc_attr($month_uid); ?>"><?php echo wp_kses_post($month_label); ?></h3> <?php $month_label_shown = true; } $day_label = $md_start . ' – ' . $md_end; $day_uid = $ics_data['guid'] . '-' . r34ics_uid(); $has_desc = r34ics_has_desc($args, $event); // datetime now $tz = 'Europe/Berlin'; $timestamp = time(); $dt = new DateTime("now", new DateTimeZone($tz)); $dt->setTimestamp($timestamp); $dt_now = $dt->format('YmdHis'); // Event Start End $start_ts = $event['multiday']['start_date'] . $event['multiday']['start_time']; $end_ts = $event['multiday']['end_date'] . $event['multiday']['end_time']; if( $dt_now >= $start_ts && $dt_now < $end_ts ) { ?> <div class="ics-calendar-date-wrapper" data-date="<?php echo esc_attr($day_label); ?>"> <h4 class="ics-calendar-date" id="<?php echo esc_attr($day_uid); ?>"><?php echo wp_kses_post($day_label); ?></h4> <dl class="events" aria-labelledby="<?php echo esc_attr($day_uid); ?>"> <dd class="<?php echo r34ics_event_css_classes($event, $time, $args); ?>" data-feed-key="<?php echo intval($event['feed_key']); ?>" <?php if (!empty($ics_data['colors'][$event['feed_key']]['base'])) { echo ' data-feed-color="' . esc_attr($ics_data['colors'][$event['feed_key']]['base']) . '"'; } if (!empty($event['categories'])) { echo ' data-categories="' . esc_attr($event['categories']) . '"'; } ?>> <?php // Event label (title) echo $R34ICS->event_label_html($args, $event, (!empty($has_desc) ? array('has_desc') : null)); // Sub-label echo $R34ICS->event_sublabel_html($args, $event, null); // Description/Location/Organizer echo $R34ICS->event_description_html($args, $event, null, $has_desc); $current_event_found = true; ?> </dd><?php // We've now used this event $multiday_events_used[] = $multiday_instance_uid; $i++; if (!empty($args['count']) && $i >= intval($args['count'])) { echo '</dl></div></article>'; break(5); } ?> </dl> </div> <?php } } // Remove event from array (to skip day if it only has multi-day events) unset($day_events[$time][$event_key]); } // Remove time from array if all of its events have been removed if (empty($day_events[$time])) { unset($day_events[$time]); } } // Skip day if all of its events were multi-day if (empty($day_events)) { continue; } // Loop through day events $all_day_indicator_shown = !empty($args['hidealldayindicator']); $day_label_shown = false; foreach ((array)$day_events as $time => $events) { foreach ((array)$events as $event) { // We're NOT looking for multiday events right now (these should all be removed above already) if (!empty($event['multiday'])) { continue; } // Skip event if under the skip limit if (!empty($args['skip']) && $skip_i < $args['skip']) { $skip_i++; continue; } // Display month label if needed if (empty($args['nomonthheaders']) && empty($month_label_shown)) { ?> <h3 class="ics-calendar-label" id="<?php echo esc_attr($month_uid); ?>"><?php echo wp_kses_post($month_label); ?></h3> <?php $month_label_shown = true; } // Show day label if not yet displayed if (empty($day_label_shown)) { $day_label = r34ics_date($date_format, $month.'/'.$day.'/'.$year); $day_uid = $ics_data['guid'] . '-' . $year . $month . $day; ?> <div class="ics-calendar-date-wrapper" data-date="<?php echo esc_attr($day_label); ?>"> <h4 class="ics-calendar-date" id="<?php echo esc_attr($day_uid); ?>"><?php echo wp_kses_post($day_label); ?></h4> <dl class="events" aria-labelledby="<?php echo esc_attr($day_uid); ?>"> <?php $day_label_shown = true; } $has_desc = r34ics_has_desc($args, $event); if ($time == 'all-day') { if (empty($args['hidetimes']) && !$all_day_indicator_shown) { ?><dt class="all-day-indicator" data-feed-key="<?php echo intval($event['feed_key']); ?>"<?php if (!empty($ics_data['colors'][$event['feed_key']]['base'])) { echo ' data-feed-color="' . esc_attr($ics_data['colors'][$event['feed_key']]['base']) . '"'; } if (!empty($event['categories'])) { echo ' data-categories="' . esc_attr($event['categories']) . '"'; } ?>><?php _e('All Day', 'r34ics'); ?></dt><?php $all_day_indicator_shown = true; } ?><dd class="<?php echo r34ics_event_css_classes($event, $time, $args); ?>" data-feed-key="<?php echo intval($event['feed_key']); ?>"<?php if (!empty($ics_data['colors'][$event['feed_key']]['base'])) { echo ' data-feed-color="' . esc_attr($ics_data['colors'][$event['feed_key']]['base']) . '"'; } if (!empty($event['categories'])) { echo ' data-categories="' . esc_attr($event['categories']) . '"'; } ?>> <?php // Event label (title) echo $R34ICS->event_label_html($args, $event, (!empty($has_desc) ? array('has_desc') : null)); // Sub-label echo $R34ICS->event_sublabel_html($args, $event, null); // Description/Location/Organizer echo $R34ICS->event_description_html($args, $event, null, $has_desc); $current_event_found = true; ?> </dd><?php } else { $dt_now = (int)$dt->format('Hi'); $start = (int)str_replace(":","",$event['start']); $end = (int)str_replace(":","",$event['end']); if( $dt_now >= $start && $dt_now < $end ) { if (empty($args['hidetimes']) && !empty($event['start'])) { ?><dt class="time" data-feed-key="<?php echo intval($event['feed_key']); ?>"<?php if (!empty($ics_data['colors'][$event['feed_key']]['base'])) { echo ' data-feed-color="' . esc_attr($ics_data['colors'][$event['feed_key']]['base']) . '"'; } if (!empty($event['categories'])) { echo ' data-categories="' . esc_attr($event['categories']) . '"'; } ?>><?php echo wp_kses_post($event['start']); if (!empty($event['end']) && $event['end'] != $event['start']) { if (empty($args['showendtimes'])) { ?> <span class="end_time show_on_hover">– <?php echo wp_kses_post($event['end']); ?></span> <?php } else { ?> <span class="end_time">– <?php echo wp_kses_post($event['end']); ?></span> <?php } } ?></dt><?php } ?><dd class="<?php echo r34ics_event_css_classes($event, $time, $args); ?>" data-feed-key="<?php echo intval($event['feed_key']); ?>"<?php if (!empty($ics_data['colors'][$event['feed_key']]['base'])) { echo ' data-feed-color="' . esc_attr($ics_data['colors'][$event['feed_key']]['base']) . '"'; } if (!empty($event['categories'])) { echo ' data-categories="' . esc_attr($event['categories']) . '"'; } ?>> <?php // Event label (title) echo $R34ICS->event_label_html($args, $event, (!empty($has_desc) ? array('has_desc') : null)); // Sub-label echo $R34ICS->event_sublabel_html($args, $event, null); // Description/Location/Organizer echo $R34ICS->event_description_html($args, $event, null, $has_desc); $current_event_found = true; ?> </dd> <?php } } $i++; if (!empty($args['count']) && $i >= intval($args['count'])) { if (!empty($day_label_shown)) { echo '</dl></div></article>'; } break(5); } } } if (!empty($day_label_shown)) { ?> </dl> </div> <?php } } ?> </article> <?php } } } // Color code key if (!empty($args['legendposition']) && $args['legendposition'] == 'below') { echo $R34ICS->color_key_html($args, $ics_data); } // Actions after rendering calendar wrapper (can include additional template output) do_action('r34ics_display_calendar_after_wrapper', $view, $args, $ics_data); } if (!$current_event_found) { ?> <p style="background-color:#fef4c0;">Bitte rufen Sie uns auf unserem Bereitschaftstelefon unter der Nummer <strong>112</strong> an.</p> <?php } ?> </section>
It is actually possible with hooks to create your own custom view templates, but I haven’t gotten into documenting how that works. (It’s the way I handle adding the extra views that are available in the Pro version.)
Practically speaking, you’d probably have to recreate several chunks of functionality from the
R34ICS::display_calendar()
method for list view. (I haven’t really prioritized third-party template extensibility, so it’s not as easy to work with as it could/should be.) But that would be a way to have your own templates that wouldn’t get overwritten when there’s a new update.Albeit I am not very deep into PHP coding, I will try it.
Thanks again.
-
This reply was modified 2 years, 3 months ago by
rs71.
Well… it’s not really something I’d advocate at this point, as it relies on several hooks that are not listed in the documentation yet. But if you are feeling bold ?? you can have a look through the code in the
R34ICS::display_calendar()
method. Check for instances ofdo_action()
orapply_filters()
to see where those come into play. In general they’re insideswitch($view)
statements. So by inventing your own value for theview
parameter in the shortcode, you can get it to prepare and load your template instead of one of the built-in ones.One in particular to be aware of is
r34ics_display_calendar_render_template
. This is the action that loads your template.-
This reply was modified 2 years, 3 months ago by
room34.
-
This reply was modified 2 years, 3 months ago by
- The topic ‘how to display only current list entries?’ is closed to new replies.