SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Popup Calendar

  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Earth
    Posts
    724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Popup Calendar

    Hi,

    Whats where does one start. I need a Popup Calendar to use with my custom cms so users can select date from calendar aposed to list/menu style?

    Thanks

  2. #2
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    There are a TON of free ones available, ask google you'll find many.

    Be sure it is cross browser compliant (if its js) and easy to implement.

  3. #3
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like the YUI Calendar control for this (Javascript). Once you load the dependant JS and CSS files you just need code like this to render it on page:

    Code Javascript:
    var cal = new YAHOO.widget.Calendar('containerID');
    cal.render();

    You'll also need to capture the selected dates, and probably write them to a hidden form field to capture the input when the form is submitted.

    You can adapt this method to work for users with JS disabled by making the form field available for manual entry in those cases. (start as a text input, and JS to change it to a hidden input)

  4. #4
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Earth
    Posts
    724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks, hmm thats rather extensive calendar. Might be looking for something a little more light weight maybe.

  5. #5
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Here is one of two that I use

    To use it, include the css and javascript

    and

    HTML Code:
    <input type='text' name='name' onfocus='showCalendarControl(this)' />
    You could also probably use a type='button' and use onclick='showCalendarControl('input_id')' instead (i've never used it this way for this particular calendar)

    Very easy to implement imo.

    Code CSS:
    /**************** CALENDAR ****************/
    #CalendarControlIFrame {
      display: none;
      left: 0px;
      position: absolute;
      top: 0px;
      height: 250px;
      width: 250px;
      z-index: 99;
    }
     
    #CalendarControl {
      position:absolute;
      background-color:#FFF;
      margin:0;
      padding:0;
      display:none;
      z-index: 100;
    }
     
    #CalendarControl table {
      font-family: arial, verdana, helvetica, sans-serif;
      font-size: 8pt;
      border-left: 1px solid #336;
      border-right: 1px solid #336;
    }
     
    #CalendarControl th {
      font-weight: normal;
    }
     
    #CalendarControl th a {
      font-weight: normal;
      text-decoration: none;
      color: #FFF;
      padding: 1px;
    }
     
    #CalendarControl td {
      text-align: center;
    }
     
    #CalendarControl .header {
      background-color: #336;
    }
     
    #CalendarControl .weekday {
      background-color: #DDD;
      color: #000;
    }
     
    #CalendarControl .weekend {
      background-color: #FFC;
      color: #000;
    }
     
    #CalendarControl .current {
      border: 1px solid #339;
      background-color: #336;
      color: #FFF;
    }
     
    #CalendarControl .weekday,
    #CalendarControl .weekend,
    #CalendarControl .current {
      display: block;
      text-decoration: none;
      border: 1px solid #FFF;
      width: 2em;
    }
     
    #CalendarControl .weekday:hover,
    #CalendarControl .weekend:hover,
    #CalendarControl .current:hover {
      color: #FFF;
      background-color: #336;
      border: 1px solid #999;
    }
     
    #CalendarControl .previous {
      text-align: left;
    }
     
    #CalendarControl .next {
      text-align: right;
    }
     
    #CalendarControl .previous,
    #CalendarControl .next {
      padding: 1px 3px 1px 3px;
      font-size: 1.4em;
    }
     
    #CalendarControl .previous a,
    #CalendarControl .next a {
      color: #FFF;
      text-decoration: none;
      font-weight: bold;
    }
     
    #CalendarControl .title {
      text-align: center;
      font-weight: bold;
      color: #FFF;
    }
     
    #CalendarControl .empty {
      background-color: #CCC;
      border: 1px solid #FFF;
    }


    Code JavaScript:
    function positionInfo(object) {
     
      var p_elm = object;
     
      this.getElementLeft = getElementLeft;
      function getElementLeft() {
        var x = 0;
        var elm;
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        while (elm != null) {
          x+= elm.offsetLeft;
          elm = elm.offsetParent;
        }
        return parseInt(x);
      }
     
      this.getElementWidth = getElementWidth;
      function getElementWidth(){
        var elm;
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        return parseInt(elm.offsetWidth);
      }
     
      this.getElementRight = getElementRight;
      function getElementRight(){
        return getElementLeft(p_elm) + getElementWidth(p_elm);
      }
     
      this.getElementTop = getElementTop;
      function getElementTop() {
        var y = 0;
        var elm;
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        while (elm != null) {
          y+= elm.offsetTop;
          elm = elm.offsetParent;
        }
        return parseInt(y);
      }
     
      this.getElementHeight = getElementHeight;
      function getElementHeight(){
        var elm;
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        return parseInt(elm.offsetHeight);
      }
     
      this.getElementBottom = getElementBottom;
      function getElementBottom(){
        return getElementTop(p_elm) + getElementHeight(p_elm);
      }
    }
     
    function CalendarControl() {
     
      var calendarId = 'CalendarControl';
      var currentYear = 0;
      var currentMonth = 0;
      var currentDay = 0;
     
      var selectedYear = 0;
      var selectedMonth = 0;
      var selectedDay = 0;
     
      var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
      var dateField = null;
     
      function getProperty(p_property){
        var p_elm = calendarId;
        var elm = null;
     
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        if (elm != null){
          if(elm.style){
            elm = elm.style;
            if(elm[p_property]){
              return elm[p_property];
            } else {
              return null;
            }
          } else {
            return null;
          }
        }
      }
     
      function setElementProperty(p_property, p_value, p_elmId){
        var p_elm = p_elmId;
        var elm = null;
     
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        if((elm != null) && (elm.style != null)){
          elm = elm.style;
          elm[ p_property ] = p_value;
        }
      }
     
      function setProperty(p_property, p_value) {
        setElementProperty(p_property, p_value, calendarId);
      }
     
      function getDaysInMonth(year, month) {
        return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
      }
     
      function getDayOfWeek(year, month, day) {
        var date = new Date(year,month-1,day)
        return date.getDay();
      }
     
      this.clearDate = clearDate;
      function clearDate() {
        dateField.value = '';
        hide();
      }
     
      this.setDate = setDate;
      function setDate(year, month, day) {
        if (dateField) {
          if (month < 10) {month = "0" + month;}
          if (day < 10) {day = "0" + day;}
     
          var dateString = month+"-"+day+"-"+year;
          dateField.value = dateString;
          hide();
        }
        return;
      }
     
      this.changeMonth = changeMonth;
      function changeMonth(change) {
        currentMonth += change;
        currentDay = 0;
        if(currentMonth > 12) {
          currentMonth = 1;
          currentYear++;
        } else if(currentMonth < 1) {
          currentMonth = 12;
          currentYear--;
        }
     
        calendar = document.getElementById(calendarId);
        calendar.innerHTML = calendarDrawTable();
      }
     
      this.changeYear = changeYear;
      function changeYear(change) {
        currentYear += change;
        currentDay = 0;
        calendar = document.getElementById(calendarId);
        calendar.innerHTML = calendarDrawTable();
      }
     
      function getCurrentYear() {
        var year = new Date().getYear();
        if(year < 1900) year += 1900;
        return year;
      }
     
      function getCurrentMonth() {
        return new Date().getMonth() + 1;
      } 
     
      function getCurrentDay() {
        return new Date().getDate();
      }
     
      function calendarDrawTable() {
     
        var dayOfMonth = 1;
        var validDay = 0;
        var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
        var daysInMonth = getDaysInMonth(currentYear, currentMonth);
        var css_class = null; //CSS class for each day
     
        var table = "<table cellspacing='0' cellpadding='0' border='0'>";
        table = table + "<tr class='header'>";
        table = table + "  <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'>&lt;</a> <a href='javascript:changeCalendarControlYear(-1);'>&laquo;</a></td>";
        table = table + "  <td colspan='3' class='title'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>";
        table = table + "  <td colspan='2' class='next'><a href='javascript:changeCalendarControlYear(1);'>&raquo;</a> <a href='javascript:changeCalendarControlMonth(1);'>&gt;</a></td>";
        table = table + "</tr>";
        table = table + "<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>";
     
        for(var week=0; week < 6; week++) {
          table = table + "<tr>";
          for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) {
            if(week == 0 && startDayOfWeek == dayOfWeek) {
              validDay = 1;
            } else if (validDay == 1 && dayOfMonth > daysInMonth) {
              validDay = 0;
            }
     
            if(validDay) {
              if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) {
                css_class = 'current';
              } else if (dayOfWeek == 0 || dayOfWeek == 6) {
                css_class = 'weekend';
              } else {
                css_class = 'weekday';
              }
     
              table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfMonth+"</a></td>";
              dayOfMonth++;
            } else {
              table = table + "<td class='empty'>&nbsp;</td>";
            }
          }
          table = table + "</tr>";
        }
     
        table = table + "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:clearCalendarControl();'>Clear</a> | <a href='javascript:hideCalendarControl();'>Close</a></td></tr>";
        table = table + "</table>";
     
        return table;
      }
     
      this.show = show;
      function show(field) {
        can_hide = 0;
     
        // If the calendar is visible and associated with
        // this field do not do anything.
        if (dateField == field) {
          return;
        } else {
          dateField = field;
        }
     
        if(dateField) {
          try {
            var dateString = new String(dateField.value);
            var dateParts = dateString.split("-");
     
            selectedMonth = parseInt(dateParts[0],10);
            selectedDay = parseInt(dateParts[1],10);
            selectedYear = parseInt(dateParts[2],10);
          } catch(e) {}
        }
     
        if (!(selectedYear && selectedMonth && selectedDay)) {
          selectedMonth = getCurrentMonth();
          selectedDay = getCurrentDay();
          selectedYear = getCurrentYear();
        }
     
        currentMonth = selectedMonth;
        currentDay = selectedDay;
        currentYear = selectedYear;
     
        if(document.getElementById){
     
          calendar = document.getElementById(calendarId);
          calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);
     
          setProperty('display', 'block');
     
          var fieldPos = new positionInfo(dateField);
          var calendarPos = new positionInfo(calendarId);
     
          var x = fieldPos.getElementLeft();
          var y = fieldPos.getElementBottom();
     
          setProperty('left', x + "px");
          setProperty('top', y + "px");
     
          if (document.all) {
            setElementProperty('display', 'block', 'CalendarControlIFrame');
            setElementProperty('left', x + "px", 'CalendarControlIFrame');
            setElementProperty('top', y + "px", 'CalendarControlIFrame');
            setElementProperty('width', calendarPos.getElementWidth() + "px", 'CalendarControlIFrame');
            setElementProperty('height', calendarPos.getElementHeight() + "px", 'CalendarControlIFrame');
          }
        }
      }
     
      this.hide = hide;
      function hide() {
        if(dateField) {
          setProperty('display', 'none');
          setElementProperty('display', 'none', 'CalendarControlIFrame');
          dateField = null;
        }
      }
     
      this.visible = visible;
      function visible() {
        return dateField
      }
     
      this.can_hide = can_hide;
      var can_hide = 0;
    }
     
    var calendarControl = new CalendarControl();
     
    function showCalendarControl(textField) {
      // textField.onblur = hideCalendarControl;
      calendarControl.show(textField);
    }
     
    function clearCalendarControl() {
      calendarControl.clearDate();
    }
     
    function hideCalendarControl() {
      if (calendarControl.visible()) {
        calendarControl.hide();
      }
    }
     
    function setCalendarControlDate(year, month, day) {
      calendarControl.setDate(year, month, day);
    }
     
    function changeCalendarControlYear(change) {
      calendarControl.changeYear(change);
    }
     
    function changeCalendarControlMonth(change) {
      calendarControl.changeMonth(change);
    }
     
    document.write("<iframe id='CalendarControlIFrame' src='javascript:false;' frameBorder='0' scrolling='no'></iframe>");
    document.write("<div id='CalendarControl'></div>");

  6. #6
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Earth
    Posts
    724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Perfect.. Easy as to impliment.

    Thanks!

  7. #7
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Earth
    Posts
    724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it posible to have the date display in text field as 2007-12-09 so it can be inserted into the db as date?

    Cheers

  8. #8
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    When you submit the form, rearrange it in PHP before inserting into DB.

  9. #9
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Earth
    Posts
    724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Yea thats what I ended up doing. Thought it could be done in the javascript easy as well.

    Thanks

  10. #10
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The popup cal on PHPMyAdmin (PMA) is very versatile.

    Create a date field in a table, add a row using PMA, then you'll see the date picking icon.

    I found it very easy to integrate with form element on a page - some JS knowledge required of course.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •