Jump to:

10851 Posts in 2517 Topics by 1793 members

All other Modules

SilverStripe Forums » All other Modules » Trying to extend event_calendar with minor change, adding rollover popup/tool tip to hasEvent class

Discuss all other Modules here.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1 2 3
Go to End
Author Topic: 1677 Views
  • TF-35Lightning
    Avatar
    Community Member
    137 Posts

    Re: Trying to extend event_calendar with minor change, adding rollover popup/tool tip to hasEvent class Link to this post

    Unclescheese the $Event.Title loads correctly here.

    <% control Days %>
    <td class="$Today $OutOfMonth $CurrentDay $HasEvent">
    <a href="$ShowDayLink">$Number<% if Events %><% control Events %><li><span>$Event.Title</span></li></a><% end_control %><% end_if %>
    </td>
    <% end_control %>

    But now I have another field called Rollovertext that I am adding back in CalendarEvent.php

    class CalendarEvent extends Page
    {

       static $db = array (

          'Rollovertext' => 'Text'
       );

    Is there anyway I can call this "Rollovertext" in that control block you showed me??? Or is that not possible? eg.

    <% control Days %>
    <td class="$Today $OutOfMonth $CurrentDay $HasEvent">
    <a href="$ShowDayLink">$Number<% if Events %><% control Events %><li><span>$Event.Rollovertext</span></li></a><% end_control %><% end_if %>
    </td>
    <% end_control %>

    As when I try that I get blank/nothing.

  • TF-35Lightning
    Avatar
    Community Member
    137 Posts

    Re: Trying to extend event_calendar with minor change, adding rollover popup/tool tip to hasEvent class Link to this post

    Uncleecheese,

    Ok I got my livecalendarwidget rollover popups/tooltips on hasevent class via jquery working a treat for the first month it displays.

    I have:

    //jquery sitting inside ss template

    <script type="text/javascript">
    jQuery(document).ready(function(){
       $("#live-calendar-widget .calendar tbody td.hasEvent").hover(
          function(){

             $(this).find("span").css('display', 'block');
             $(this).find("span").animate({opacity: 1, top: "-60"}, {queue:false, duration:400});
          },
             
             function(){
             $(this).find("span").animate({opacity: 0, top: "-50"}, {queue:false, complete:
             function(){ $(this).hide();      
                
                }
             }
             );
          });
    });

    </script>

    //css

    live-calendar-widget .calendar tbody td.hasEvent span {

    background: url(../images/blerbbg.png) no-repeat;
    width: 152px;
    height: 58px;
    position: absolute;
    top: -30px;
    left: -20px;
    text-align: center;
    padding: 5px;
    display: none;
    line-height:110%;
    color:#000000;
    cursor:pointer;
    font:Arial, Helvetica, sans-serif;
    font-size: 10px;
    }

    // call the $LiveCalendarWidget

    Now when I click the Next Arrow next to the Jump to Month drop down list that button has a link of something like
    /LiveCalendarWidget_Controller/show/201011/20101007/20101007/Calendar/79/0

    and that months calendar now loads up, but my jquery rollover popups don't load for the new month.

    Here is the code difference

    //on the first month has event with working tooltip
    <td class=" hasEvent">
    <a href="Calendar2010>30<ul><li><span style="opacity: 0; top: -50px; display: none; ">here is the content of my tooltip</span></li></ul></a>
    </td>

    //after I have changed month here is what a hasevent looks like and obviously tooltip does not load
    <td class=" hasEvent">
    <a href="Calendar2010">07<ul><li><span>here is the content of my tooltip</span></li></ul></a>
    </td>

    Any idea on what I need to do to get the new months you select to also load there own popups etc as you click through????

  • TF-35Lightning
    Avatar
    Community Member
    137 Posts

    Re: Trying to extend event_calendar with minor change, adding rollover popup/tool tip to hasEvent class Link to this post

    final jquery code that now works using the live() object. Only issue I have now is that for some reason the dates that are displayed on the calendar that belong to the previous month (eg at the start and end of the month) they are still displaying any on rollover events if they are attached to that date, I have to try and work out how to stop that.

    $("#live-calendar-widget .calendar tbody td.hasEvent").live('mouseenter',

    function(){

    jQuery(this).find("span").css('display', 'block');
    jQuery(this).find("span").animate({opacity: 1, top: "-60"}, {queue:false, duration:400});
    });

    $("#live-calendar-widget .calendar tbody td.hasEvent").live('mouseleave',function(){

    $(this).find("span").animate({opacity: 0, top: "-50"}, {queue:false, complete:
    function(){ $(this).hide();

    }
    }

    );

    });

    })(jQuery);

    1677 Views
Page: 1 2 3
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.