• Resolved rs71

    (@rstattelmann)


    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 displayed

    Here 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.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author room34

    (@room34)

    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.

    Thread Starter rs71

    (@rstattelmann)

    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>
    Plugin Author room34

    (@room34)

    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.

    Thread Starter rs71

    (@rstattelmann)

    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.
    Plugin Author room34

    (@room34)

    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 of do_action() or apply_filters() to see where those come into play. In general they’re inside switch($view) statements. So by inventing your own value for the view 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.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘how to display only current list entries?’ is closed to new replies.