Support

Home › Forums › Calendar › The calendar does not link to events properly

The calendar does not link to events properly

Posted: October 24, 2012 at 2:53 pm

Viewing 3 reply threads


spark

    October 24, 2012 at 2:53 pm

    Hi all,

    After attempting to customize the CSS of the calendar widget I am at wit’s end. I’ve got it to look sort of correct, but there is one huge issue I’m having – on an event day, instead of just putting an anchor tag around the date on the table (in the ) it makes a completely separate that is absolutely positioned over that particular .

    This system seems over-complicated. This means I am unable to remove that green checkbox graphic and place a background indicator graphic underneath the day of the month in the correct . The s with events on that day don’t even have a class associated with them that indicates there is an event.

    Even if I mess with the z-index and put the div.fc-day-number on top of the absolutely positioned it shows the day number on top, but of course it blocks the that you need to click to see the event.

    Surely there is a way to just put the anchor in the div.fc-day-number and forget about this absolute-positioned nonsense?


    spark

      October 25, 2012 at 8:16 am

      Sorry, I was describing html tags like “div” and “a” and it seems to have messed up my post, even with spaces around the brackets. The preview lied! Here is how it’s supposed to read:

      Hi all,

      After attempting to customize the CSS of the calendar widget I am at wit’s end. I’ve got it to look sort of correct, but there is one huge issue I’m having – on an event day, instead of just putting an anchor tag around the date on the table (in the div.fc-day-numberX) it makes a completely separate “div” that is absolutely positioned over that particular “td”.

      This system seems over-complicated. This means I am unable to remove that green checkbox graphic and place a background indicator graphic underneath the day of the month in the correct “td”. The “td”s with events on that day don’t even have a class associated with them that indicates there is an event.

      Even if I mess with the z-index and put the div.fc-day-number on top of the absolutely positioned “div” it shows the day number on top, but of course it blocks the “a” that you need to click to see the event.

      Surely there is a way to just put the anchor in the td.fc-day or div.fc-day-number and forget about this absolute-positioned nonsense?


      spark

        October 25, 2012 at 2:09 pm

        Progress update:

        No one is able to help me out it seems, so I’ve been fiddling with this issue. I’ve learned that the main issues are with FullCalendar itself, not necessarily EventEspresso.

        After completely deleting the calendar.css file, I have managed to get the a.fc-event to be essentially a mark on the calendar with no event name or description – just a graphic. I’ve also managed to get the day number from the table (td.ui-widget-content div div.fc-day-number) to appear ABOVE that anchor while still maintaining the ability to click on it. TIL about the nice CSS property “pointer-events”. Here is an image of what – http://i.imgur.com/DJHtt.png – here’s how I did it, in CSS:

        #espresso_calendar table.fc-border-separate td.ui-widget-content div div.fc-day-number {position:relative; top:3px; z-index:800; pointer-events:none;}

#espresso_calendar a.fc-event {background:url('images/calendar-dot.png') 0 0 no-repeat; margin-top:5px; height:24px; border:none;}

#espresso_calendar a.fc-event span.fc-event-title {display:none;}

        You’ll probably need to mess with the margins/heights/widths/etc of everything yourself to fit your own design.

        Now I have one problem left. I need to change the color of the text for the days with events. If you look at that screenshot, I need to get the color of ’31’ to be white so it appears correctly on the red spot.

        Of course, Full Calendar doesn’t add a class to the “td.ui-widget-content div div.fc-day-number” to indicate an event (or post) on that day, and EventEspresso’s implementation of the calendar doesn’t either. (I imagine this is because FullCalendar just positions the checkbox graphic on top of the day so you can’t see the text anyway.) If anyone knows how to get a class on a “td” if there is a post/event on that day, your help would be greatly appreciated.


        spark

          October 26, 2012 at 1:25 pm

          Man, I’m good at being my own support line! Although I didn’t get the anchor to appear in the actual “td” it’s associated with, but I figured out how to get the date to appear in the a.fc-event-title. So now it doesn’t matter if the a.fc-event-title is positioned on top of the date on the calendar, since the date is in the anchor now.

          Here is the code, hopefully this helps someone in the future:

          espresso-calendar-widget.php –
          Find the line that displays the p.time-display-block. For me it looked like this:

          $espresso_calendar_widget .= 'element.find(\'.fc-event-title\').after($jaer(\'\' + event.startTime + \' - \' + event.endTime + \'\'));';

          You can change it or add to it whatever you want. I changed it to this:

          $espresso_calendar_widget .= 'element.find(\'.fc-event-title\').after($jaer(\'\' + event.day + \'\'));';

          I don’t remember what other parts there are to the event object (I only needed event.day), but if you need to check enter the following code as part of the javascript that this file generates:

          console.log(event);

          Using the Firebug plugin you can check the console, open the event object that has now been logged there, and see what properties you can use.

          Now I just need to figure out how to make this change in the “custom” area so they’re not overwritten by plugin updates, but otherwise it’s working fine.

          Viewing 3 reply threads

          The support post ‘The calendar does not link to events properly’ is closed to new replies.

          Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

          Status: closed

          Updated by spark 11 years, 11 months ago ago

          Topic Tags

          Tagged: 

          Notifications

          This topic is: resolved
          Event Espresso - Staging Server