Calendar not Responsive

@mattf10 looking at the calendar on smaller than about ios 6 or equivalent you are correct, it’s small. The theme we use for most sites is responsive, and that helps, but the opensource calendar we use is not in and of iteself responsive.

We are using https://fullcalendar.io/ , which is an opensource calendar.

There are a couple options:

– you could code to change the default view, or person can select a different view, like month or day
– you could use a webpage and create your own links directly to events, which depending on the number of events, might be easy. if you do that, link directly to the ‘child’ events, which are the ones shown on calendar
– there is also a ‘display options’ plugin that you can buy, which allows you to shortcode or display events in the woocommerce shop, so they are big preview images

one of those might help. I’ll follow this thread.

Thanks for the reply. Understood that the calendar itself isn’t responsive so I will try one of the above solutions.

I saw that the demo for fullcalendar.io shows a list view. Is it possible to display the plugin calendar like that, eg by overriding a template?

If not, I’ve already coded an upcoming events widget, so I could modify that to make my own list.

@mattf10 that’s cool you made upcoming events. if you roll your own plugin and share it, we can give you a link in our newsletter or something. depends on if you want to share the code in github or post here.

it’s great when the community finds solutions like this.

I’ll ask about the list view. The might be viable.

Hi @mattf10

I’d be interested to see the code for your upcoming events widget if you are willing to share?

Thanks

Happy to share my widget code. I’m going to be lazy and post it here.

/**
 * Upcoming Events Widget Class.
 */
class my_theme_upcoming_events extends WP_Widget {

	/* Widget setup */
	public function __construct() {
		parent::__construct(
			'my-theme-upcoming-events', // base ID
			'Upcoming Events', // name
			array( 'classname' => 'upcoming-events-widget', 'description' => esc_html__('Upcoming Events.', 'mc') )
		);
	}

	/* How to display the widget on the screen */
	public function widget( $args, $controls ) {
		
		extract( $args );

		/* Our variables from the widget settings */
		$title = apply_filters('widget_title', $controls['title'] );
		$post_count = $controls['post_count'];
		if ( !$post_count ) $post_count = 3;
		
		
		// setup the basic posts query to find out events
		$args = array(
			'post_type' => apply_filters( 'qsot-setting', 'qsot-event', 'core_post_type' ),
			'post_status' => array( 'publish', 'protected' ),
			'posts_per_page' => -1,
			'post_parent__not' => 0,
			'suppress_filters' => false,
			// only future events
			'start_date_after' => date( 'Y-m-d H:i:s' )
		);

		// aggregate the list of events to render
		$events = array();
		if ( class_exists('qsot_frontend_calendar') && method_exists('qsot_frontend_calendar', 'get_all_calendar_events') )
			$events = qsot_frontend_calendar::get_all_calendar_events( get_posts( $args ) );
		
		// if there aren't any events, don't write out any content
		if ( ! $events )
			return;		
			
		// sort by start date asc
		usort($events, function ($item1, $item2) {
			if ($item1['start'] == $item2['start']) return 0;
			return $item1['start'] < $item2['start'] ? -1 : 1;
		});
		
		?>
		<li id="text-10" class="widget-container widget_text">
		<?php
		if ( $title ) echo $before_title . esc_attr( $title ) . $after_title; ?>
		
			<ul>
			<?php 
				foreach( $events as $event ) : ?>
				<li class="mc-rpost clear">
					<div class="mc-rpost-data">
						<h4><a href="<?php echo $event['url']; ?>" title="<?php echo $event['title']; ?>"><?php echo $event['title']; ?></a></h4>
						<p class="meta"><?php echo date('d M Y', strtotime($event['start'])); ?></p>
					</div>
				</li>
				<?php endforeach; ?>
		
			</ul>
		</li>
		<?php
	}

	/* Update the widget settings */
	public function update( $new_controls, $old_controls ) {
		$controls = $old_controls;
		$controls['title'] = strip_tags( $new_controls['title'] );
		$controls['post_count'] = strip_tags( $new_controls['post_count'] );

		return $controls;
	}

	/* Displays the widget settings controls on the widget panel */
	public function form( $controls ) {

		/* Set up some default widget settings */
		$defaults = array( 'title' => '', 'post_count' => 3 );
		$controls = wp_parse_args( (array) $controls, $defaults ); ?>

		<!-- Widget Title: Text Input -->
		<p>
			<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_html_e('Title:', 'mc'); ?></label>
			<input id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" value="<?php echo esc_attr( $controls['title'] ); ?>" style="width: 80%;" />
		</p>

		<!-- Post Quantity: Text Input -->
		<p>
			<label for="<?php echo esc_attr( $this->get_field_id( 'post_count' ) ); ?>"><?php esc_html_e('Number of Events:', 'mc'); ?></label>
			<input id="<?php echo esc_attr( $this->get_field_id( 'post_count' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'post_count' ) ); ?>" value="<?php echo esc_attr( $controls['post_count'] ); ?>" style="width:20%;" />
		</p>

	<?php
	}
}

• This reply was modified 7 years, 8 months ago by mattf10.

@mattf10 I just wanted to thank you for posting something that would be useful for others. I’m adding a couple tags as well.