How do i customize event + page and calender appearance?

I would like to customize a single event page and a calendar as well.

For the single event page, I would like make like the screenshot. basically 2 column layout, event information on the left and the map on the right. and I would like make time, date, place and address on each line.
How do I make a new template file without hurting the core plug in data, so any future update won't break my template?

I can do CSS and very basic PHP. is there any list of variables for date, time and etc so I can echo out on my temple?

  • Tyler Postle

    Hey Yosuke,

    Welcome to the WPMU Dev community!

    This question is a bit above my level of expertise. I am going to call in second level support (the coding experts) to get their feedback on this for you :slight_smile: - Their responses may be a bit slower because they deal with more complex issues.

    Thanks for the solid explanation and the screenshot. The more specific you can be the faster we'll be able to get a solution here, so if you think of anything else definitely add it here.

    Thanks for choosing WPMU Dev!

    Cheers,
    Tyler

  • Tyler Postle

    Hey Yosuke,

    Thanks for posting back. I am going to flag SLS again just in case for you :slight_smile:

    You could also check out the jobs board too: https://premium.wpmudev.org/wordpress-development/ - Here you can pay one of the awesome developers from our community to do some customizations you need. You can either post the job or contact a developer directly.

    Let's see what SLS has to say first though!

    Thanks for your patience on this Yosuke.

    Cheers,
    Tyler

  • Yosuke

    Thank you Tyler.

    I have more questions now, and hopefully @Hoang Ngo can answer at the same time.

    On Calendar view, Is there any way to show the calendar from today to next 30 days or some specific days? It is because let's say today is the middle of the month. Right now it seems it only shows this month, but it shows past events and date of this month. If your past date or events are not important, it makes sense to show or list the event from today to forward. It especially becomes a problem on iPhone(smart phone) I have to scroll down all way to pass past days of this month to see what is happening this week and forward.

    I have looked the setting page, and I can't still figure out how to set it up this way if possible.

    How about like listing mode? Is there any way to just list currently scheduled event on date order basis? So you don't have to see all dates which are empty.
    I was playing with Archive short code but I can't get around it. I don't know exactly how I manipulate these parameters yet :slight_frown:
    For the listing page, I attached the screenshot to show you how I would like to change. Basically New events come on top. and have a little thumbnail(featured image). and other information right next to the thumbnail.
    It might be a good idea for you guys for future release of this plug in.

  • Hoang Ngo

    Hello @Yosuke,

    I hope you are well today

    Firstly, for customize the single event template in a safe way, please copy the file /plugins/events-and-bookings/default-templates/default/single-incsub_event.php
    And paste it to your current theme, and now you can start to update the look without worry when the plugin update, your changes will lost.

    I can do CSS and very basic PHP. is there any list of variables for date, time and etc so I can echo out on my temple?

    For the timestamp when event start, you can get it by
    get_post_meta($post->ID, 'incsub_event_start', true)
    Here is for location
    get_post_meta($post->ID, 'incsub_event_venue', true)
    For the title, actually this will be wordpress title, so the function
    the_title()
    Will work.

    Best regards,
    Hoang

    • Yosuke

      Hello Hoang,

      Thank you for the tip.
      I thought i knew enough about wordpress, but I still need to know a lot more to do things I asked.

      I copied the template file on my theme fold.(root)
      After I modify the contents on this copied php on the template, how does it call this template from the plug in? Does it load automatically because it has the same name?

      My another question is
      How can I apply diffirent css style for the same element in difference pages or template?
      If you can take a look my screenshot. On my event list page, it shows the list, but it is taking so much space, so I demo my self css style on element inspector on Firefox. I set display:none on attending option form. and change font size. however if I change that, it would affect on other pages right? like single event page. How can I apply different css style on different pages on the same element?

      And when you look date and time field, you notice at the end of time, word "pm" goes to next line. I looked css and I couldn't find how it controls the width. When you look further down. the column actually extend to more right.. Could you tell me how to fix this?

      Also,
      How can I change the

  • Hoang Ngo

    Hi again :slight_smile:

    On Calendar view, Is there any way to show the calendar from today to next 30 days or some specific days? It is because let's say today is the middle of the month. Right now it seems it only shows this month, but it shows past events and date of this month. If your past date or events are not important, it makes sense to show or list the event from today to forward. It especially becomes a problem on iPhone(smart phone) I have to scroll down all way to pass past days of this month to see what is happening this week and forward.

    I'm sorry but this seem out of the box now, the idea of calendar is display the events in a month, so for your feature, I think we can do something like next events in xxx day, which can be achieve by using the shortcode
    You can make the shorcode like this
    [eab_archive lookahead="true" weeks="4" order="DESC"]

    This will display all of your events from now to next 4 weeks (30 days), and order from newest to oldest. I think this will help you to build the listing page too.

    If you have any issues please don't hesitate to let us know so we can assist

    Best regards,
    Hoang

  • Hoang Ngo

    Hi @Yosuke,

    I hope you are well today

    How can I apply diffirent css style for the same element in difference pages or template?

    We have many ways for this, but the most easy way is adding an extra class to the element, or use parent selector, etc. Can you please send that page url so I can take a look? :slight_smile:

    And when you look date and time field, you notice at the end of time, word "pm" goes to next line. I looked css and I couldn't find how it controls the width. When you look further down. the column actually extend to more right.. Could you tell me how to fix this?

    This is styling issue, yes, I can help you but I will need the url too :slight_smile:.

    If you want to keep the urls private, so can you please send in:

    - Mark to my attention - ATTN: Hoang Ngo
    - Link back to this thread
    - Include admin/network access
    - Include any relevant URLS for your site

    On the contact form, select "I have a different question", this ensures it comes through and gets assigned to me.

    Also, when you post new comment here, please make it a brand new comment :slight_smile:, I'm a little bit confuse the first time when I see you've just comment but I can not find the new comment :p

    Best regards,
    Hoang

  • Yosuke

    Hi Hoang,

    I emailed you through contact form as you suggested.
    When you said a new comment, I wasn't sure how exactly make a new comment. I hope this commenting I am writing now is a new comment.

    For other support member,

    While I wait a reply form Hoang, I have another question.
    Is there any way to assign a new user to add and edit new events?
    on this event page, we have different associates through out the country. We would like to these people to submit different events on their own. So we would like to assign some people can only access to a certain category of events so they cannot modify other categories, neither other part of wordpress admin.

    Let me know.
    Thanks!

    Yosuke

  • Tyler Postle

    Hey Yosuke,

    Hope you are well today! Glad you and Hoang were able to make some progress on this :slight_smile:

    As for your other questions:

    And when you look date and time field, you notice at the end of time, word "pm" goes to next line. I looked css and I couldn't find how it controls the width. When you look further down. the column actually extend to more right.. Could you tell me how to fix this?

    Can you try adding this code to your custom CSS are:

    .wpmudevevents-date {
    width: 70%;
    }

    That should extend the text area wide enough to fit the "PM" in there - you can adjust the percentage as needed :slight_smile:

    Is there any way to assign a new user to add and edit new events?
    on this event page, we have different associates through out the country. We would like to these people to submit different events on their own. So we would like to assign some people can only access to a certain category of events so they cannot modify other categories, neither other part of wordpress admin.

    To allow other users to edit events you can go to Events > Settings > Scroll down to the add-ons and activate "Capabilities" this will create a new option at the bottom of settings where you can set event permissions for your user roles. Say you allow "Contributor" to edit events, now you can set whichever users you want to edit events to the "Contributor" role.

    If you want them to be able to edit them on the front end of the site then you can activate the "Front-Page Editing" add-on. Now a new "Edit Event" link will show up beside the event times on each event page. A "contributor" will be able to click that link and edit the event OR they can go to the new Front end event editing page and add their own event.

    To stop them from going into the admin area we can hide the standard page/post "edit" link on events pages. So they don't go to the admin side.

    There isn't a built in way to stop editing per category, but we can just take the category selection right off the page so it won't have one then you can always set that yourself as needed.

    Add this code to hide the category selection on the front end and also hide the "edit" link that goes to the admin side for events.

    div#eab-events-fpe-meta_box-categories, .single-incsub_event .post-edit-link {
    display: none;
    }

    Screenshots to illustrate the above are attached :slight_smile:

    Hope that helps Yosuke! This post got kind of long so if you need any clarification on anything here just let us know!

    All the best,
    Tyler

  • Yosuke

    Tyler,

    Thank you so much for detailed screenshot and explanation!

    I think I set up most of the setting as you suggested. However I have a question about setting CSS. Where should I put the css code you provided?

    On actual css file(but it might be ruined if I update the plugin future right?)

    or

    my theme file(if so I don't know how to properly set up a custom css on my child them, please advise me. Sorry this might be a kind of basic question)?

    And I have checked my google calendar setting and it is successfully authenticated.(when you checked it was not set up yet) But I still don't see the icon properly.

    I also encountered another problem when I entered the short code on my "event list" page which I pointed in the plugin setting page. When I set up the front editor doesn't get displayed properly. Like attached screenshot, a part of editor goes way down

    [eab_event_editor]
    [eab_archive lookahead="true" weeks="6" order="ASC"]

    Do you have any idea why this is happening?
    I will email you through the contact form to give you our developer account access

  • Yosuke

    Hello Tyler and Haong,

    While I was waiting your reply, I worked on the site and encountered a problem.
    It happened around 3:20 PST on Thursday July 10th.

    I didn't now touch any PHP, I was just trying different setting from the event+ setting page and shortcode. at some point my website went a complete blank(front and back)

    I quickly chat with @Patrick (who was online at the time)

    I changed the name of the plugin to disable it. then I was able to put it online again. And then, I try to re-active the plug in. However it gave me a fatal error, so WP didn't activate it. As Patrick suggested, I downloaded a fresh plugin and installed it and tried to active it. But it doesn't activate it. I quickly updated all the activated plug-ins, and tried to active Event+ again, but the same error again.

    I gave you guys access to the site, so I thought maybe you were working on it when it went offline, but I can't tell.

    It was working okay, so hopefully this is not something serious. I hope I can use this plug in on the website.

    thanks!

  • Tyler Postle

    Hey Yosuke,

    No problem! Glad I could help :slight_smile:

    Where should I put the css code you provided?

    Sorry! I should of mentioned of this, you can put it in your child theme style.css if you have one or you can install this plugin: https://wordpress.org/plugins/simple-custom-css/ - it will give you a custom css field under the "Appearances" menu in your dashboard.

    I also encountered another problem when I entered the short code on my "event list" page which I pointed in the plugin setting page. When I set up the front editor doesn't get displayed properly. Like attached screenshot, a part of editor goes way down

    We should be able to fix this with some custom CSS; however, I can't seem to find the page and also notice that it appears your events+ isn't working.

    I saw your login credentials you sent, but there's no login url - do you mind sending that to me in the same email as before? Your site doesn't use the standard WordPress login url.

    Once we have that we can take a closer look :slight_smile:

    It's also a good idea to check for plugin conflicts whenever you have issues like this one. Deactivate other plugins to see if it resolves the issue.

    Talk to you soon,
    Tyler

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.