Event plus data and time issue

Hi, Im having a few problems with my calendar and the date and time. For instance if i view the calendar on computer full screen it doesn't show the time for each event but in mobile view it does?

Also in mobile view the Month title includes the time and +0000000000UTC but not on my laptop browser?

so im guessing this is some wierd compatability with my theme Salient?

  • Jack Kitterhing

    Hi there @Joshua,

    Hope you're well today and thanks for your patience on this.

    I've just taken a look and see this as well, after checking this is actually by design for that display, there's mobile specific css which is

    /* ----- Breakpoints ----- */
    
    @media screen and (max-width : 768px) {
    	/* force old browsers, such as legacy droid */
    	.wpmudevevents-list table.eab-monthly_calendar,
    	.wpmudevevents-list table.eab-monthly_calendar tr,
    	.wpmudevevents-list table.eab-monthly_calendar th,
    	.wpmudevevents-list table.eab-monthly_calendar td
    	{
    		display: block;
    	}
    
    	.wpmudevevents-list table.eab-monthly_calendar td {
    		display: block;
    		height: auto;
    		padding: 5px;
    	}
    	.wpmudevevents-list table.eab-monthly_calendar tbody td[colspan],
    	.wpmudevevents-list table.eab-monthly_calendar thead th,
    	.wpmudevevents-list table.eab-monthly_calendar tfoot th
    	{
    		display: none;
    	}
    
    	.wpmudevevents-list table.eab-monthly_calendar thead h4 span,
    	.wpmudevevents-list table.eab-monthly_calendar tfoot b span {
    		display: none;
    	}
    	.wpmudevevents-list table.eab-monthly_calendar thead h4 time:after,
    	.wpmudevevents-list table.eab-monthly_calendar tfoot b time:after {
    		content: attr(datetime);
    	}
    
    	.wpmudevevents-list table.eab-monthly_calendar thead td,
    	.wpmudevevents-list table.eab-monthly_calendar tfoot td
    	{
    		float: left;
    		width: 20%;
    		padding: 0;
    	}
    	.wpmudevevents-list table.eab-monthly_calendar .wpmudevevents-calendar-event {
    		font-weight: bold;
    	}
    	.wpmudevevents-list table.eab-monthly_calendar .wpmudevevents-calendar-event-info {
    		position: static;
    		display: inline!important;
    		background: none;
    		border: none;
    		font-weight: normal;
    		font-size: .9em;
    	}
    	.wpmudevevents-list table.eab-monthly_calendar .wpmudevevents-calendar-event-info:before {
    		content: ' ';
    		display: block;
    	}
    	.wpmudevevents-list table.eab-monthly_calendar td .eab-date-full {
    		display: block !important;
    	}
    	.wpmudevevents-list table.eab-monthly_calendar td .eab-date-ordinal {
    		display: none;
    	}
    } /* end 768px break */

    We could change that to

    /* ----- Breakpoints ----- */
    
    @media screen and (max-width : 1524px ) {
    	/* force old browsers, such as legacy droid */
    	.wpmudevevents-list table.eab-monthly_calendar,
    	.wpmudevevents-list table.eab-monthly_calendar tr,
    	.wpmudevevents-list table.eab-monthly_calendar th,
    	.wpmudevevents-list table.eab-monthly_calendar td
    	{
    		display: block !important;
    	}
    
    	.wpmudevevents-list table.eab-monthly_calendar td {
    		display: block;
    		height: auto;
    		padding: 5px;
    	}
    	.wpmudevevents-list table.eab-monthly_calendar tbody td[colspan],
    	.wpmudevevents-list table.eab-monthly_calendar thead th,
    	.wpmudevevents-list table.eab-monthly_calendar tfoot th
    	{
    		display: none;
    	}
    
    	.wpmudevevents-list table.eab-monthly_calendar thead h4 span,
    	.wpmudevevents-list table.eab-monthly_calendar tfoot b span {
    		display: none;
    	}
    	.wpmudevevents-list table.eab-monthly_calendar thead h4 time:after,
    	.wpmudevevents-list table.eab-monthly_calendar tfoot b time:after {
    		content: attr(datetime);
    	}
    
    	.wpmudevevents-list table.eab-monthly_calendar thead td,
    	.wpmudevevents-list table.eab-monthly_calendar tfoot td
    	{
    		float: left;
    		width: 20%;
    		padding: 0;
    	}
    	.wpmudevevents-list table.eab-monthly_calendar .wpmudevevents-calendar-event {
    		font-weight: bold;
    	}
    	.wpmudevevents-list table.eab-monthly_calendar .wpmudevevents-calendar-event-info {
    		position: static;
    		display: inline!important;
    		background: none;
    		border: none;
    		font-weight: normal;
    		font-size: .9em;
    	}
    	.wpmudevevents-list table.eab-monthly_calendar .wpmudevevents-calendar-event-info:before {
    		content: ' ';
    		display: block;
    	}
    	.wpmudevevents-list table.eab-monthly_calendar td .eab-date-full {
    		display: block !important;
    	}
    	.wpmudevevents-list table.eab-monthly_calendar td .eab-date-ordinal {
    		display: none;
    	}
    } /* end 1524px break */

    So you'd then get that view on desktop as well, or did you want to remove the time from the mobile view?

    Thanks!

    Kind Regards
    Jack.

  • Jack Kitterhing

    Hi there @Joshua,

    Hope you're well today! :slight_smile:

    Great work! Now by default the event start and end time aren't showing on this particular template, to echo them you'd use.

    echo date('Y-m-d', $event->get_end_timestamp())
    
    echo date('d-m-Y', $event->get_start_timestamp())

    To then add that to the template you'd copy over archive-incsub-event.php from default-templates/calendar to your themes root folder and since this info is being added from a class, you'll want to create a new PHP class that extends Eab_CalendarTable_EventArchiveCalendar
    and override the get_event_info_as_string method, to include the info you want. :slight_smile:

    Thank you!

    Kind Regards
    Jack

  • Jack Kitterhing

    Hi there Josh,

    Hope you're well today and thanks for your patience on this. :slight_smile:

    Do I need to add the php function to the php file "archive-incsub-event.php" that i move to the root folder of the theme?

    That's correct, that would go in archive-incsub-event.php in the root folder of your theme, rather than move it, copy the one you have to your themes root. :slight_smile:

    Thanks!

    Kind Regards
    Jack.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.