Full page Calendar - Select Month

I have the events calendar set up and have used the shortcode to display a full page calendar [eab_calendar]

Is there a way to add a button to change the month. it defaults to showing the current month, the client wants to be able to scroll ahead to the next month or so.

Thank you for your help

Steve

  • Vinod Dalvi

    Hi @qtree-systems,

    I hope you are well today and thank you for your question.

    You can use navigation argument of eab_calendar shortcode as shown below to display navigational links for calender so that client can scroll it.
    [eab_calendar navigation="true"]

    You can also change default date using date argument as shown below.
    [eab_calendar date="12/01/2013"]

    You can use both parameters as displayed below.
    [eab_calendar navigation="true" date="12/01/2013"]

    Best Regards,

  • Vinod Dalvi

    Hi @qtree-systems,

    Thanks for reply.

    You can get all the default templates from the default-templates folder in events plugin. you can copy the template you want to edit to your theme folder.

    The css for navigation heading are in css file default-templates/calendar/events.css . You can copy the following css in to style.css file of your theme to edit the navigation heading font or style.

    .eab-shortcode_calendar .eab-shortcode_calendar-title-top,
    .eab-shortcode_calendar .eab-shortcode_calendar-title-bottom
    {
    	background: transparent;
    	height: auto;
    	border: none;
    }
    .eab-shortcode_calendar .eab-shortcode_calendar-title-top td,
    .eab-shortcode_calendar .eab-shortcode_calendar-title-bottom td
    {
    	height: auto;
    	border: none;
    	text-align: center;
    }
    .eab-shortcode_calendar .eab-shortcode_calendar-title-top td a,
    .eab-shortcode_calendar .eab-shortcode_calendar-title-bottom td a
    {
    	text-decoration: none;
    }
    .eab-shortcode_calendar .eab-shortcode_calendar-title-top h4 {
    	margin: 0;
    	padding: 0;
    }
    .eab-shortcode_calendar .eab-shortcode_calendar-title-top .eab-navigation-prev,
    .eab-shortcode_calendar .eab-shortcode_calendar-title-top .eab-navigation-next
    {
    	font-size: 1.6em;
    }

    Change the above css in style.css file however you want to.

    Let me know if you face any problem to do it.

    Best Regards,