Someone help me how to create a calendar.. :)
Printable View
Someone help me how to create a calendar.. :)
What do you have so far?
I did one that uses a div positioned absolutley then I rewrite the days in a table each time you move through the months, screen shot included:
can you show me the code? what i did is a sample lay out using tables. but it is not interacting, the months cannot be move and the present date is not highlighted..
There's about a bazillion of these already in existence if you just Google it...
Or if you insist on rolling your own, you'll probably need to post the markup, styles and script that you're using for anyone to adequately help you.
Quote:
Originally Posted by SambaNeko
yes! i want to create and design my own, what i have now is this,
can you help me code the js? all i want is to make this interactive and ill handle for the design. helps will be appreciated. tnxCode:<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=3>
<TR>
<TD COLSPAN="7" ALIGN=center><B>December 2001</B></TD>
</TR>
<TR>
<TD COLSPAN="7" ALIGN=center><I>Another year comes to an end</I></TD>
</TR>
<TR>
<TD ALIGN=center>Sun</TD>
<TD ALIGN=center>Mon</TD>
<TD ALIGN=center>Tue</TD>
<TD ALIGN=center>Wed</TD>
<TD ALIGN=center>Thu</TD>
<TD ALIGN=center>Fri</TD>
<TD ALIGN=center>Sat</TD>
</TR>
<TR>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center>1</TD>
</TR>
<TR>
<TD ALIGN=center>2</TD>
<TD ALIGN=center>3</TD>
<TD ALIGN=center>4</TD>
<TD ALIGN=center>5</TD>
<TD ALIGN=center>6</TD>
<TD ALIGN=center>7</TD>
<TD ALIGN=center>8</TD>
</TR>
<TR>
<TD ALIGN=center>9</TD>
<TD ALIGN=center>10</TD>
<TD ALIGN=center>11</TD>
<TD ALIGN=center>12</TD>
<TD ALIGN=center>13</TD>
<TD ALIGN=center>14</TD>
<TD ALIGN=center>15</TD>
</TR>
<TR>
<TD ALIGN=center>16</TD>
<TD ALIGN=center>17</TD>
<TD ALIGN=center>18</TD>
<TD ALIGN=center>19</TD>
<TD ALIGN=center>20</TD>
<TD ALIGN=center>21</TD>
<TD ALIGN=center>22</TD>
</TR>
<TR>
<TD ALIGN=center>23</TD>
<TD ALIGN=center>24</TD>
<TD ALIGN=center>25</TD>
<TD ALIGN=center>26</TD>
<TD ALIGN=center>27</TD>
<TD ALIGN=center>28</TD>
<TD ALIGN=center>29</TD>
</TR>
<TR>
<TD ALIGN=center>30</TD>
<TD ALIGN=center>31</TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
<TD ALIGN=center></TD>
</TR>
</TABLE>
I've uploaded a zip with all the files needed (.js, .css and .png's) also there is a html file which demonstrates it. Should give you a good start.
The html file should explain its self quite well but it uses a wrapper function called my_UseCalendar() which isn't required but was useful for what I was using it for.
By including the .js file you get a object named PB_Calendar. When you want to show the calendar use:
displayObj should be the object to display the result (an input box).Code:PB_Calendar.cal_UseCalendar(displayObj, displayDF, hiddenObj, hiddenDF, positionObj, positionTopOffset, positionLeftOffset, limitStart, limitEnd);
displayDF is the display format for the result (see bellow for possible values).
hiddenObj is the same as displayObj but allows you to have a different format (if you dont need it pass null)
hiddenDF is the format for the second object.
positionObj is a object that the calendar should be displayed based on.
positionTopOffset is how far vertically to offset the calendar from positionObj.
positionLeftOffset is how far horizontally to offset the calendar from positionObj.
limitStart is either -1, 0 or a date in dd/mm/yyyy format. -1 means no limit, 0 means today.
limitEnd is either -1, 0 or a date in dd/mm/yyyy format. -1 means no limit, 0 means today.
Supported Date Formats:
dd/mm/yyyy
dd-mm-yyyy
d mmmm yyyy
dd mmmm yyyy
yyyy-mm-ddT00:00
Notice that mmmm pulls the name of the month from PB_Calendar.cal_MonthsFormat[] so if you were to use it in another language you can replace the values in the array.
Same goes for .cal_MonthsDisplay[] (Month name on the calendar box) & .cal_DaysHeader[] (Days of the week headers).
@Kows: I looked at your calendar there but how does it select the dates?
Haven't used my site for a while but just uploaded this example to it: http://www.etaxibooker.co.uk/CalendarDemo.htm
You don't. No where in this post does the author say he wants to be able to select a date. He wanted to be able to change months and have the current date selected, which is exactly what my Calendar class allows.Quote:
Originally Posted by PBertie
Sorry my mistake. Out of interest what sort of situations do you use your calendar in?Quote:
Originally Posted by kows
I don't at all, actually. It was just me playing around with object-oriented programming concepts in JavaScript. I have a few other examples, including a form validator, an image gallery, a simple game, and a wrapper class for AJAX requests.Quote:
Originally Posted by PBertie
tnx for the help guys.. i actually research a calendar code and i found one but it doesnt show up in my website when i try to use the code.
That's great, but if you're asking for help with it then you'll need to provide some context.
Either way, a few solutions have been posted here already -- any problem with using those?
i tried to use your code but i dont know how to insert or use my css file. ill try it again once i get home.Quote:
Originally Posted by kows
what's the problem with this codes? the calendar is not displayed in my site. i tried not to add this one in my site an create a html file and its working but after i insert this one, it no longer can be seen.Code:</div>
<table>
<tr>
<td style="width: 20em">
<div id="cont"></div>
</td>
</tr>
</table>
<script type="text/javascript">
Calendar.setup({
cont : "cont",
fdow : 1,
selectionType : Calendar.SEL_MULTIPLE,
disabled : function(date) {
return (date.getDate() >= 5 &&
date.getDate() <= 15);
},
checkRange : function(date, cal) {
alert("Date " + date + " cannot be selected");
}
});
</script>
</div>
I have no idea. Where did you find it? You're using some random code found online -- how are we supposed to know how it works?
Well hopefully there's more than just that one block of script on your page if you expect that to work. Have you downloaded the latest release package from that site? It has a demo HTML file in it - take a look at that. Make sure you've included all necessary JS files.
Also note that that particular calendar script is free for non-commercial usage only. Also "DHTML."
yes i have actually downloaded all the files and it is running, the problem is i dont understand why it is not showing in my site.
here's the complete files that i am working on right now.
try to run the disabled.html file under the demo folder. that's what i want to put on my site..
thanks for the help guys... im done! :)