PHP - Calendar, Datepicker Calendar

The calendar component written in php script. It contains 2 modes: normal display calendar and date picker. See the demo below to check whether your browser support this script or not.

Fixed Display Style

Date 1 :
  • Set default date to today date (server time)
  • Set year navigate from 1970 to 2020
  • Allow date selectable from 13 May 2008 to 01 March 2015
  • Not allow to navigate other dates from above
  • Disabled Sat and Sun


$myCalendar = new tc_calendar("date2");
$myCalendar->setDate(date('d'), date('m'), date('Y'));
$myCalendar->setYearInterval(1970, 2020);
$myCalendar->dateAllow('2008-05-13', '2015-03-01', false);

DatePicker Style

Date 2 :
  • Default date set to 01 March 1960
  • Set year navigate from 1960 to 2015
  • Allow date selectable from 01 January 1960 to 01 March 2015
  • Allow to navigate other dates from above


$myCalendar = new tc_calendar("date1", true);
$myCalendar->setDate(01, 03, 1960);
$myCalendar->setYearInterval(1960, 2015);
$myCalendar->dateAllow('1960-01-01', '2015-03-01');

DatePicker with no input box

Date 3 : 25 July 2010
  • Default date to current server date
  • Set year navigate from 2000 to 2015
  • Allow date selectable from 13 May 2008 to 01 March 2015
  • Allow to navigate other dates from above
  • Date input box set to false


$myCalendar = new tc_calendar("date5", true, false);
$myCalendar->setDate(date('d'), date('m'), date('Y'));
$myCalendar->setYearInterval(2000, 2015);
$myCalendar->dateAllow('2008-05-13', '2015-03-01');
$myCalendar->setDateFormat('j F Y');

Date Pair Example



$myCalendar = new tc_calendar("date3", true, false);
$myCalendar->setDate(date('d', strtotime($date1)) , date('m', strtotime($date1)) , date('Y', strtotime($date1)));
$myCalendar->setYearInterval(1970, 2020);

$myCalendar = new tc_calendar("date4", true, false);
$myCalendar->setDate(date('d', strtotime($date2)) , date('m', strtotime($date2)) , date('Y', strtotime($date2)));
$myCalendar->setYearInterval(1970, 2020);

Example of submiting value: click here

Download zip file: (20.52 KB.)
Version 3.1 (Last update 10 July 2010)

What's new


  • Function added: disabledDay (thanks to Jim R.)
  • Day style adjustable with css (.mon, .tue, .wed, .thu, .fri, .sat, .sun)


  • Bug fixed: day combobox not update (February case) when select date from calendar
  • Bug fixed: auto resize not applied when calendar start in hide div mode (display: none;)
  • Bug fixed: day combo box not update when selecting date < 10 (occured from v2.9)
  • Bug fixed: (18 May 2010) glich on IE7 update on calendar_form.php and calendar.css
  • Bug fixed: (22 May 2010) parseInt error on calendar.js function isDateAllow()


  • Auto adjust calendar size (width & height)
  • Bug fixed: Valid day combo box when selecting month or year (input box mode)

Download tc_calendar with language pack (by Ciprian)


How to setup:

Only 2 steps requires for setup and use this calendar component.

Put the javascript file(.js) in the head section or somewhere else but it should be include once in a page.

<script language="javascript" src="calendar.js"></script>

Create form element in the html and put the following code

<form action="somewhere.php" method="post">
//get class into the page
require_once('classes/tc_calendar.php'); //instantiate class and set properties $myCalendar = new tc_calendar("date1", true);
$myCalendar->setDate(1, 1, 2000);
//output the calendar
?> </form>

How to get the value?

To get the date selected in calendar by php after submit the form, simple write script as the following:

$theDate = isset($_REQUEST["date1"]) ? $_REQUEST["date1"] : "";


The above script should be on another file that html form point to. The parameter 'date1' is the object name that you set in the code at the time calendar construct. See further in Functions and Constructor below.

To get the date selected by javascript on the current page, write script as the following:

<form action="somewhere.php" method="post" name="form1">
//get class into the page
require_once('classes/tc_calendar.php'); //instantiate class and set properties $myCalendar = new tc_calendar("date1", true);
$myCalendar->setDate(1, 1, 2000);
//output the calendar
?> </form> //use javascript to get the value <script language="javascript"> <!-- function showDateSelected(){ alert("Date selected is "+document.form1.date1.value); } //--> </script> //create link to click and check calendar value <a href="javascript:showDateSelected();">Check calendar value</a>



tc_calendar (string bindObjectName)

tc_calendar (string bindObjectName, boolean date_picker)

tc_calendar (string bindObjectName, boolean date_picker, bool show_input)

date_picker default value is false.
show_input default value is true


autoSubmit (bool flag, string form_name, string target_url)

Specify the calendar to auto-submit the value. Default value of autosubmit is false

To set calendar auto submit, specify flag to true and you need to specify either form_name or target_url to make the calendar to perform autosubmit correctly

Ex 1. $myCalendar->autoSubmit(true, "myForm");
//assume that the calendar is in the form named 'myForm', then tell the calendar to auto submit the value (other values in myForm will be submitted together by html post method)

Ex 2. $myCalendar->autoSubmit(true, "", "anywhere.php");
//tell the calendar to submit the value to 'anywhere.php'. This method will submit only calendar value via html get method

dateAllow (date from, date to, bool navigate_not_allowed_date)

Specify date range allow to select. Other dates from input will be disabled. The parameter navigate_not_allowed_date will handle the user to navigate over the disable date, default is true (means allow)

Specify both date from and to will set range of date user can select.
Specify only date from or to will set range from/upto year set by setYearInterval method.

Ex 1. $myCalendar->dateAllow('2008-05-13', '2010-03-01', false); //allow user select date from 13 May 2008 to 1 Mar 2010
Ex 2. $myCalendar->dateAllow('2008-05-13', '', false); //allow user select date from 13 May 2008 upto whatever can navigate
Ex 3. $myCalendar->dateAllow('', '2010-03-01', false); //allow user select date from whatever can navigate upto 1 Mar 2010

disabledDay (string day)

Specify day column to be disabled. Possible day value: Mon, Tue, Wed, Thu, Fri, Sat, Sun

Ex. $myCalendar->disabledDay('Sun'); //disable Sunday column

getDate ()

Get the calendar value in date format YYYY-MM-DD

Ex. $myCalendar->getDate(); //return 2009-06-19

setDate (int day, int month, int year)

Optional: Set default selected date to the value input. For month parameter: January=1 and December=12

Ex. $myCalendar->setDate(15, 6, 2005); //Set the date to 15 June 2005

setDateFormat (string format)

Optional: Set the format of date display when no input box. Apply with 'showInput' function

Ex. $myCalendar->setDateFormat('j F Y'); //date will display like '9 September 2009'

setIcon (string url)

Optional: Set icon in date picker mode. If the icon is not set the date picker will show text as link.

Ex. $myCalendar->setIcon("images/iconCalendar.gif");

setHeight (int height) - deprecated since v2.9 - auto sizing applied

Optional: Set height of calendar. Default value is 205 pixels

Ex. $myCalendar->setHeight(205);

setPath (string path)

Optional: Set the path to the 'calendar_form.php' if it is not in the same directory as your script. The path string is a relative path to the script file.

Ex. $myCalendar->setPath("folder1/");

setText (string text)

Optional: Set text to display. The text will show in date picker mode when the icon is not set.

Ex. $myCalendar->setText("Click Me");

setWidth (int width) - deprecated since v2.9 - auto sizing applied

Optional: Set width of calendar. Default value is 150 pixels

Ex. $myCalendar->setWidth(150);

setYearInterval (int year_start, int year_end)

Optional: Set the year start and year end display on calendar combo box. Default value is +15 and -15 from current year (30 years)

Ex. $myCalendar->setYearInterval(1970, 2020);

showInput (bool flag)

Optional: Set the input box display on/off. If showInput set to false, the date will display in panel as example above 'DatePicker with no input box'. Default value is true

Ex. $myCalendar->showInput(false);

startMonday (bool flag)

Optional: Set whether the calendar will be start on Sunday or Monday. Set flag to true means the calendar will display first date as Monday, otherwise false will display first date as Sunday. Default value is false.

Ex. $myCalendar->startMonday(true);


Write the output calendar to the screen


Visitor Review  Write a review

piet on 23 Jul 2010 15:59 reply

hi there thanks for this great piece of code, i am wondering though, is it possible to select multiple dates?



RV on 22 Jul 2010 06:40 reply

I have inserted the date picker in a form and I get the calendar selection but with a transparent background. Also the calendar format is much too naarow. When clicking the previous or next button the calndar moves to the richt and becomes narrower until it disappears completely. Something is defintely wrong in my php code but I cannot figure out what. The calendar is part of a table in a form.

RV on 22 Jul 2010 06:49 reply

Sorry Problem solved. Got wrong css.

Maxtor on 22 Jul 2010 05:31 reply

I have one little trouble: i put the calendar in one form and work in the languaje selected. But when the form load data, date is correct but in english. I try to put the dateformat all in numbers, but again the dateformat return to month in text.

Some idea?


PD.Awesome work!


fuxxa on 20 Jul 2010 12:29 reply

i forgot something :-)
very great tool


fuxxa on 20 Jul 2010 12:21 reply

Hi there,

can sombody give me a hand?
My Calendar is visible in english.
Is there a chance to get German language pack?
'LANG' folder is present, but there is no action.

Somebody any idea?

gabrouze on 22 Jul 2010 03:17 reply

I have done this ...

define("L_LANG", "de_DE");
require lang/calendar.de_DE.php';
require 'tc_calendar.php';

it works !

Hank on 19 Jul 2010 20:20 reply

Great script man.

I have one small issue, the calendar pop up aligns to the right of the screen. is there anyway to make it align to the left or just where the button is?



Silvestre on 15 Jul 2010 23:53 reply


I downloaded the 3.1v and tried on OpenSuse and Ubuntu.
I found an error and can't say how to fix.
When i select a date on the iframe then the iframe didn't close or return the field with the selected date.
PHP 5.3.2
Apache 2.2.4

Thanks and congratulations by the script!

Silvestre on 16 Jul 2010 00:07 reply

In time, i got that error with firedebug when i select a day in the calendar:

document.getElementById(objname + "_dp") is null
[Break on this error] var dp = document.getElementById(objname+"_dp").value;

(calendar.js: line 14)

Raj Singh on 15 Jul 2010 00:53 reply

Thanks, for such help


Paul on 11 Jul 2010 13:38 reply

Hi, script is just what i am looking for but your download site seems to be down. Do you have it on a mirror anywhere? Thanks, P


Keishel on 10 Jul 2010 22:05 reply

I am receiving this problem. I got the calendar up running on my web server. When my friends enter onto the server and change their computer's date, they are seeing the today's date as their computer's date. Is there a way to allow the calendar to only use the server's date?

TJ on 11 Jul 2010 13:25 reply

Hi, do you use the javascript to check for date? the javascript will run on each machine and retrieve the local datetime

maybe you need to try to set default date by php. php script will run on server and get the date from server

anyway, this is my guess if it is not correct please explain me more

Thank you

Ben on 08 Jul 2010 13:15 reply

I figured it out i needed to part the date into day, month, and year set the variable for each then use setDate($month, $day, $year); then it correctly set the default date for my calendar field to my associated mysql field.

thnx this has been great.

I need to set the default date to a variable from my database then use the date select if someone wants to change the date. If I use $myCalendar->setDate(1, 1, 2010); then the default date is 1/1/2010 but what if i want the default date to be set to a variable like $defaultDate?


Keishel on 07 Jul 2010 16:16 reply

Hello, first of all i would like to say that this is a great piece of script.
Is there any way I can disable all the sundays with in the calendar.

TJ on 09 Jul 2010 14:46 reply

To disable some days on calendar, you need to modify codes on calendar_form.php

for example:

line 385:
if($date_num == 0) // 0=Sunday
$dateLink = false;
Keishel on 10 Jul 2010 21:57 reply


Ben on 07 Jul 2010 13:38 reply

I need to set the default date to a variable from my database then use the date select if someone wants to change the date. If I use $myCalendar->setDate(1, 1, 2010); then the default date is 1/1/2010 but what if i want the default date to be set to a variable like $defaultDate?


limex on 04 Jul 2010 08:11 reply

The script is great.
But I have a strange effect:
- In Firefox the top right corner of the calendar is "sticked" at the icon.
- In IE the right border of the calender is "sticked" to the border of the table cell.

Any idea how to fix this to the same behavour?


Phillip Zannini on 03 Jul 2010 09:17 reply

Love the script, thanks for the hard work you've put in. Have a question.

When I'm using the PHP version, on one of my pages it works perfectly. On another - I do the exact same setup - and it shows the date correctly with the little calendar icon but doesn't allow it to be clicked. Im' mystified. Any help is welcome!

Phillip on 03 Jul 2010 10:15 reply

Hey, figured out the issue - DOH! - I forgot to include the CSS info in the header. Different question now.

I have a form that requires 3 dates be entered. I've figured out how to get 2 of them using the script buy essentially using the from/to example and separating them. I have no idea how to modify the JS to make this work for three dates. Thoughts?

Toerti on 30 Jun 2010 06:55 reply

Very nice, i love this script! But I can´t use the header function whe using the localized version, because of some outputs in localization.lib.php. Is there another way to localize it.

ciprianmp on 30 Jun 2010 11:00 reply

I need a demo of your script errors or more details. I don't understand the "header" issue.
Please contact me back to my email.

Menelaos on 25 Jun 2010 20:09 reply

This is a beautiful script. Very well written, great functionality and easy to understand!

Thank you!

One question:

This code does not work for me: theDate = isset($_REQUEST["date1"]) ? $_REQUEST["date1"] : "";
it's as if it's ignored.

In order to extract the value I use the Javascript option, but I can't figure out how to place that in a variable.

What I want to do is once the value in that variable is updated(after the user clicks on a date), the page should be reloaded, while passing the contents of the variable (i.e. the date) through the URL.

Any ideas on this?

Thank you in advance.


Menelaos on 26 Jun 2010 10:58 reply

Oh, never mind.
Now that I am not sleepy, I noticed the stupid mistake I was making. :)

Thanks again.

osvaldo on 24 Jun 2010 05:56 reply

muchas gracias amigo!
código excelente!

ciprianmp on 24 Jun 2010 15:23 reply

Did you try the translated version? Both Espagnol and Argentinian are included :)

Janus on 20 Jun 2010 08:57 reply

Very good tool.
I have only one problem, the value in the box start always with 1-jan-1970?,

Janus on 22 Jun 2010 14:41 reply

Anybody a suggestion?
ciprianmp on 23 Jun 2010 17:01 reply

I see the date is set to "today" on your site. What is your question actually?
Janus on 24 Jun 2010 02:50 reply

I change it in "select day" and it is now oke for mee.
On some other site I saw de actuel date., but I'm happy with this solution.
ciprianmp on 24 Jun 2010 10:07 reply

What you need is this line:
$myCalendar->setDate(date('d'), date('m'), date('Y'));
in your class generation.
Janus on 24 Jun 2010 17:20 reply

Yes I now but that doesn't work
That give me the date 01-Jan-1970

Nash on 17 Jun 2010 12:55 reply

Very nice tutorial. Thanks so much for sharing your hard work.
I am having a problem, I am not able to send the selected date to the another HTML page.

TJ on 18 Jun 2010 03:11 reply

The submit function is the Html Form part, so you have to submit the form (by using submit button or something) to another html page

ciprianmp on 03 Jul 2010 04:50 reply

Hi. I think something like this will work:
Go to you <form tag line
<form name="form1" method="post" action="">
in our index example, and change the action to your new file where you want to submit/post and use the selected value, like:
<form name="form1" method="post" action="newpage.php?date1=$date1">
Use the according date number.
Then request and use the $date1 value in your new page.
Let us know if it worked.

ciprianmp on 03 Jul 2010 04:51 reply

<form name="form1" method="post" action="newpage.php?date1=<?php echo $date1; ?>">

Ross on 17 Jun 2010 08:50 reply

Great Script, I am a newbie php programmer and need help in knowing how to post the from and to dates once they have been selected back to my sql query, when I set it to autosubmit=true it triggers either the first or second date but never both.

TJ on 18 Jun 2010 03:09 reply


I don't think you can use autosubmit since the calendar will be autosubmit the value after you select the date on calendar

please try submit by button and disable calendar's autosubmit

That should work

Panos on 04 Jun 2010 05:41 reply

First of all thanks a lot for the provided script
I am wondering if it is easy to customize it in a way that when i upload a png (with a file name of date.png) in my server a php script search for the whole filename dataset and if the image exists before someone select the date, automatically the day cell change its color (indicating so that the the image exists in the server).
In simple words, uploading a png in the server and the calendar creates automatically a link in that date
Thanks in advance

TJ on 18 Jun 2010 03:17 reply

This should be a very advanced. First when you upload the image you have to consider which date it is, then try to set that date value to the calendar

if it is a dynamic without changing the form or page, you should try to use javascript or maybe ajax

this is possible but I never test a dynamic assigned value to calendar before.

thanks for your hint anyway ;)

Sam on 03 Jun 2010 12:35 reply

When I print $theDate = isset($_REQUEST["date1"]) ? $_REQUEST["date1"] : ""; the date format is YYYY-MM-DD

How do i change it to get DD/MM/YYYY

I need to change the order and de "-" for "/"


ciprianmp on 04 Jun 2010 10:28 reply

I hope I'm not wrong, but my solution woud be:
Open tc_calendar.php and look for this function:
function getDate(){
return str_pad($this->year, 4, "0", STR_PAD_LEFT)."-".str_pad($this->month, 2, "0", STR_PAD_LEFT)."-".str_pad($this->day, 2, "0", STR_PAD_LEFT);

Then play with it to match your needs. For example, replace it with:
function getDate(){
return str_pad($this->day, 2, "0", STR_PAD_LEFT)."/".str_pad($this->month, 2, "0", STR_PAD_LEFT)."/".str_pad($this->year, 4, "0", STR_PAD_LEFT);

Please tell us if it worked as expected, for other users to know.

ciprianmp on 04 Jun 2010 14:46 reply

I just tested and Yes, I was right!

TJ> you really need a way to notify users of replies...
TJ on 05 Jun 2010 16:49 reply

thanks for your comment about triconsole website, ciprianmp :)

Now I add the feature of notify email as your recommended

please feel free to comment further, I wrote all the code myself

PS. still hard time for me, really work hard :(
ciprianmp on 05 Jun 2010 17:24 reply

This is really really EXCELLENT!
Thank you, your users will sure appreciate it!

PS: I know you're busy, but we kinda missed you lately ;)

ciprianmp on 06 Jun 2010 18:12 reply

Did you get my replies?

Bruce S. on 28 May 2010 17:37 reply

I rewrote:

function writeDay(){
$day_drop_down = "<select name=\"".$this->objname."_day\" id=\"".$this->objname."_day\" onChange=\"javascript:tc_setDay('".$this->objname."', this[this.selectedIndex].value, '$this->path');\" class=\"tcday\">";
$day_drop_down_inner = "";
$is_selected = false;
for($i=1; $i<=31; $i++){
$selected = "";
if ((int)$this->day == $i) {
$selected = " selected";
$is_selected = true;
$day_drop_down_inner .= "<option value=\"".str_pad($i, 2 , "0", STR_PAD_LEFT)."\"$selected>$i</option>";

if (!$is_selected) {
$day_drop_down .= "<option value=\"00\" selected>Day</option>" . $day_drop_down_inner . "</select> ";
} else {
$day_drop_down .= "<option value=\"00\">Day</option>" . $day_drop_down_inner . "</select> ";

echo $day_drop_down;


function writeMonth(){
$month_drop_down = "<select name=\"".$this->objname."_month\" id=\"".$this->objname."_month\" onChange=\"javascript:tc_setMonth('".$this->objname."', this[this.selectedIndex].value, '$this->path');\" class=\"tcmonth\">";
$month_drop_down_inner = "";
$is_selected = false;
$monthnames = $this->getMonthNames();
for($i=1; $i<=sizeof($monthnames); $i++){
$selected = "";
if ((int)$this->month == $i) {
$selected = " selected";
$is_selected = true;
$month_drop_down_inner .= "<option value=\"".str_pad($i, 2, "0", STR_PAD_LEFT)."\"$selected>".$monthnames[$i-1]."</option>";

if (!$is_selected) {
$month_drop_down .= "<option value=\"00\" selected>Month</option>" . $month_drop_down_inner . "</select> ";
} else {
$month_drop_down .= "<option value=\"00\">Month</option>" . $month_drop_down_inner . "</select> ";

echo $month_drop_down;

to select Day and Month if the date is blank. It didn't seem to be doing that. Just thought I'd share.


Svein on 28 May 2010 15:45 reply

Great script! But I'm wondering; is it possible to return the date in a different format, more specifically as a timestamp. I like to store the dates in my db as timestamps, not using the date type.


ciprianmp on 25 May 2010 13:31 reply

One suggestion:
In Date Pair Example, if date1 > date2... the interval makes no sense. Can we notify the user with an alert message about this?


ciprianmp on 25 May 2010 10:09 reply

Hi. There are a few staps for that:
1. Put a variable in the header of your page, from where you submit the data to the db (same page that contains your calendar form). This is an example:
$mydate = isset($_REQUEST["date5"]) ?
$_REQUEST["date5"] : "";

2. Then send that value to the database:

mysql_connect(db_host, db_username, db_password) or die ('<center>Error: Could Not Connect To Database');
mysql_query("INSERT INTO table_name VALUES '$mydate") or die("Cannot query the database.<br />" . mysql_error());

Of course the mysql connection and row should be adjuste to fit your db credentials and table structure.
PS: If you're new to php/MySQL, please read the manuals before coding yourself.
All the best!
Ciprian M.


john on 25 May 2010 02:03 reply

how to store this calendar value in sql database??
for example..the field name in database is "date"...what thier sql syntax?
where to put this syntax?in tc_calendar.php ??

ciprianmp on 25 May 2010 10:13 reply

Sorry, read my post above.
... correction though:

mysql_query("INSERT INTO table_name (date) VALUES ($mydate)") or die("Cannot query the database.<br />" . mysql_error());

All the best!
Ciprian M.
john on 09 Jun 2010 04:45 reply

i've have done folow ur advice
when i click submit..
the date in database show 1995. and i click 2nd time the date show 1996..
what wrong??
the table in database should set varchar@date?
sory..newbie with date.. :D
ciprianmp on 09 Jun 2010 11:32 reply

You should set the field type to either date or varchar(11) (11 is the length)
Let us know.

PS: the data to be inserted looks like "YYYY-MM-DD" (2010-06-09)

ciprianmp on 09 Jun 2010 14:55 reply

Send us a link so we can check you original form for submission.

ciprianmp on 06 Jun 2010 18:13 reply

Did you get my replies about calendar picker?

ciprianmp on 24 May 2010 02:58 reply

No one have tried the localized version yet? ;)
Let's hope for some feedback for that too...
All the best.

PS: TJ, please keep the "Version 3.0 (Last update 28 April 2010)" updated, so I can check the last updates - I mean the date. Also don't forget about the "What's new" list.
I have updated the translated class to your latest changes though (as of 24.05.2010).

TJ on 24 May 2010 04:37 reply

thank you ciprianmp, I totally forgot it (getting blur from a lot of works hehe) :P

bernard on 24 Jun 2010 13:25 reply


i tried to download the localized version, but it seems that zip file is damaged.

Please could you check ?

ciprianmp on 24 Jun 2010 14:15 reply

Strange... It should work now. Can you check please?
Bernard on 24 Jun 2010 16:48 reply

OK, it is fine now !


ktuluxx on 23 May 2010 22:08 reply


Thanks for the great script.

I don't know if this question has been asked already but here it goes :

I used the date pair and is it possible to make the 'to' date disable all the date before the 'from' date.

e.g If I choose from '25 May 2010', the 'to' date will be start on 25 May 2010 and so on.

Some people will choose from '25 May 2010' to '20 May 2010' etc.

Thank You.

TJ on 24 May 2010 00:39 reply

This is a good question but the calendar script still not support for this, sorry anyway :(
ktuluxx on 24 May 2010 00:58 reply

Thanks for the reply. Will wait for your update because my programming skill sucks haha
See all reviews 1 2 3 4 5 6 7 8 9 Next»
Write a review

Search this site