pearl1811 / jmonthcalendar

Automatically exported from code.google.com/p/jmonthcalendar
Other
0 stars 0 forks source link

How to use show more link to show all tasks by qtip? #46

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
Dear Sir:
I am a newbie in javascript & jQuery, so, I can't understand the source code 
line by line. but this is rally a cool tool to help me to have a event calendar.
Now, I am trying to put this Js file in my page as a absent status table for 
students.I tried for two weeks to link the data in my Lotus Notes on the 
calendar shown, it really gave a lot Encourage.
I now need help to have a function, when clicking the 'show more', It can show 
a tasks Description or Title in the date by qtip....
Would you please help to archive this function for me, thank you very much.

Original issue reported on code.google.com by yogiyu...@gmail.com on 15 Apr 2011 at 1:23

GoogleCodeExporter commented 8 years ago
Done....thanks a lot.

Original comment by yogiyu...@gmail.com on 19 Apr 2011 at 6:14

GoogleCodeExporter commented 8 years ago
Hi,
I have been facing with the same problem. I'm also a newbie in javascript and 
find it a little hard to understand the code. Can you please help me to show 
all the events in a new page by clicking the "Show More". All I need is the 
date, so that I can pass it to another page which will show all the events in 
the respective date.

Thank you very much.

Original comment by holocous...@gmail.com on 5 May 2011 at 11:24

GoogleCodeExporter commented 8 years ago
[deleted comment]
GoogleCodeExporter commented 8 years ago
Dear holocous:
This is part of the code, in fact, author has post it in his sample code.
on the event---I call a function 'showMoreEvent',I also modify 
jMonthCalendar.js  to send one more parameter 'id' of more event div.
onShowMoreClick:function(dayEvents,id) { 
            showMoreEvent(dayEvents,id);
         }, 
function showMoreEvent(dayEvents,id){
                var eventlist;
            var evdate;
            var i=0;
            $.each(dayEvents, function(){
                if(i==0){
                    evdate=this.EVDate;
                    eventlist="<span class='moreeventlist' title='"+this.title+"'><a href='#'>"+this.Title+"</a></span>";
                }else{
                    eventlist+="<br><span class='moreeventlist' title='"+this.title+"'><a href='#'>"+this.Title+"</a></span>";
                }
                 i+=1;
            });
            var c='<div id="Dvtip" class="Dvtip"></div>';
            var d='500';
            var tt;
            var f;
            $("body").append(c);
            tt=$("#Dvtip");
            tt.html(eventlist);
            var k=$("#"+id).offset();
            var i=k;i.top=k.top+$("#"+id).height()-72;i.left=k.left;
                tt.css(i);
            tt.css("position","absolute");
            tt.show();
            $('.moreeventlist').vtip('title');
            $("#Dvtip").mouseleave (function(e){
                    tt.fadeOut(d,function(){tt.remove()});
            });

}

<style>
div#Dvtip { display: none; position: absolute; padding: 5px; left: 5px; 
min-width:125px; background-color: white; border: 1px solid #a6c9e2; 
-moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 999 }
span.moreeventlist{min-width:125px}
span.moreeventlist a{color:black}
</style>

Please enjoy it. I use this calendar as a absent status viewer, with highcharts 
charts. 

Original comment by yogiyu...@gmail.com on 6 May 2011 at 6:25

Attachments:

GoogleCodeExporter commented 8 years ago
How can i get the id of show more div.

Please help!!

Original comment by kantravi...@gmail.com on 18 Jul 2012 at 6:35

GoogleCodeExporter commented 8 years ago
Hai yogiyu, Can I get your code to show more event, because I was failed to 
allow your code ?
-- Thanks

jamharihjr@yahoo.com

Original comment by jamhari...@gmail.com on 13 Nov 2012 at 8:29