อยากทราบวิธีเรียก ฟังชั่น calendar ครับ

คือว่าผมติดปัญหาตรงที่ ผมจะสร้าง tool ตัวหนึ่งซึ่ง จะกำหนด วันที่เริ่มต้น-สิ้นสุด  จาก calendar โดยเราจะระบุวันที่ลงไปแล้วให้ไปเรียกจาก Db ขึ้นมาโชว แล้ว save file เปน .txt พอมีแนวทางไหม ครับ  ผมลองนั่งเขียนโค้ดมัน ยัง งงๆๆ
16 พ.ย. 2554 6 2,302

งง อะไรหว่า...



อย่างแรกเลย ที่จะต้องทำ คือ query ข้อมูลออกมาให้ได้ก่อน ต้องการอะไรที่จะใส่ลงไปในไฟลืบ้างก็ query ออกมาทั้งหมด ถ้าสามารถ query ออกมาแสดงผลได้ ก็สามารถ save เป็นไฟลืได้



อย่างที่สอง ก็เหมือนคำตอบจากกระทู้ก่อนหน้า เอา ข้อมูลที่ query ได้ ออกมาจัดรูบแบบ และ Save เป็นไฟล์



ขั้นตอนไม่มีอะไรซับซ้อนเลยครับ ถ้ารู้จักแตกโจทย์ออกเป็น step และ ค่อยๆทำไปทีละขั้น....



ปัญหาจะอยู่ที่ข้อมูลจะนำเอาไปใช้ต่อได้หรือเปล่า ซึ่งหลักการที่สำคัญคือ จะต้องออกแบบรุปแบบ เพื่อให้สามารถนำไปใช้งานได้ง่ายครับ เนื่องจากการ export ข้อมูลจะทำได้ง่ายกว่าการ import ครับ
#1

เอาโค้ดนี้ไปแปะที่ <body> ที่ต้องการไว้ครับ



<input type="text" class="calendarSelectDate" style="padding:6px" size="23"  />

<div id="calendarDiv"></div>
#2

และเอาคำสั่งนี้ไปแปะที่ <head> ครับ



<script src="css/calendar.js"></script>

<link href="css/calendar.css" rel="stylesheet">
#3

สร้างโฟเดอร์ css แล้วนำไฟล์ที่จะสร้างต่อไปนี้ไปเก็บไว้ครับ

1.สร้างไฟล์ calendar.js ส่วนข้างล่างคือโค้ดไฟล์ครับ

/*!

* Clean Calendar

* Copyright 2007-2009 Marc Grabanski (m@marcgrabanski.com) http://marcgrabanski.com

* Project Page: http://marcgrabanski.com/...ticle/clean-calendar

* Under the MIT License */




var popUpCal = {

  selectedMonth: new Date().getMonth(),

  // 0-11

  selectedYear: new Date().getFullYear(),

  // 4-digit year

  selectedDay: new Date().getDate(),

  calendarId: 'calendarDiv',

  inputClass: 'calendarSelectDate',



  init: function() {

    var x = getElementsByClass(popUpCal.inputClass, document, 'input');

    var y = document.getElementById(popUpCal.calendarId);

    // set the calendar position based on the input position

    for (var i = 0; i < x.length; i++) {

      x[i].onfocus = function() {

        popUpCal.selectedMonth = new Date().getMonth();

        setPos(this, y);

        // setPos(targetObj,moveObj)

        y.style.display = 'block';

        popUpCal.drawCalendar(this);

        popUpCal.setupLinks(this);

      }

    }

  },



  drawCalendar: function(inputObj) {



    var html = '';

    html = '<a id="closeCalender">Close Calendar</a>';

    html += '<table cellpadding="0" cellspacing="0" id="linksTable"><tr>';

    html += ' <td><a id="prevMonth"><< Prev</a></td>';

    html += ' <td><a id="nextMonth">Next >></a></td>';

    html += '</tr></table>';

    html += '<table id="calendar" cellpadding="0" cellspacing="0"><tr>';

    html += '<th colspan="7" class="calendarHeader">' + getMonthName(popUpCal.selectedMonth) + ' ' + popUpCal.selectedYear + '</th>';

    html += '</tr><tr class="weekDaysTitleRow">';

    var weekDays = new Array('S', 'M', 'T', 'W', 'T', 'F', 'S');

    for (var j = 0; j < weekDays.length; j++) {

      html += '<td>' + weekDays[j] + '</td>';

    }



    var daysInMonth = getDaysInMonth(popUpCal.selectedYear, popUpCal.selectedMonth);

    var startDay = getFirstDayofMonth(popUpCal.selectedYear, popUpCal.selectedMonth);

    var numRows = 0;

    var printDate = 1;

    if (startDay != 7) {

      numRows = Math.ceil(((startDay + 1) + (daysInMonth)) / 7);

      // calculate the number of rows to generate

    }



    // calculate number of days before calendar starts

    if (startDay != 7) {

      var noPrintDays = startDay + 1;

    } else {

      var noPrintDays = 0;

      // if sunday print right away

    }

    var today = new Date().getDate();

    var thisMonth = new Date().getMonth();

    var thisYear = new Date().getFullYear();

    // create calendar rows

    for (var e = 0; e < numRows; e++) {

      html += '<tr class="weekDaysRow">';

      // create calendar days

      for (var f = 0; f < 7; f++) {

        if ((printDate == today)

        && (popUpCal.selectedYear == thisYear)

        && (popUpCal.selectedMonth == thisMonth)

        && (noPrintDays == 0)) {

          html += '<td id="today" class="weekDaysCell">';

        } else {

          html += '<td class="weekDaysCell">';

        }

        if (noPrintDays == 0) {

          if (printDate <= daysInMonth) {

            html += '<a>' + printDate + '</a>';

          }

          printDate++;

        }

        html += '</td>';

        if (noPrintDays > 0) noPrintDays--;

      }

      html += '</tr>';

    }

    html += '</table>';

    html += '<!--[if lte IE 6.5]><iframe src="javascript:false;" id="calendar_cover"></iframe><![endif]-->';



    // add calendar to element to calendar Div

    var calendarDiv = document.getElementById(popUpCal.calendarId);

    calendarDiv.innerHTML = html;



    // close button link

    document.getElementById('closeCalender').onclick = function() {

      calendarDiv.style.display = 'none';

    }

    // setup next and previous links

    document.getElementById('prevMonth').onclick = function() {

      popUpCal.selectedMonth--;

      if (popUpCal.selectedMonth < 0) {

        popUpCal.selectedMonth = 11;

        popUpCal.selectedYear--;

      }

      popUpCal.drawCalendar(inputObj);

      popUpCal.setupLinks(inputObj);

    }

    document.getElementById('nextMonth').onclick = function() {

      popUpCal.selectedMonth++;

      if (popUpCal.selectedMonth > 11) {

        popUpCal.selectedMonth = 0;

        popUpCal.selectedYear++;

      }

      popUpCal.drawCalendar(inputObj);

      popUpCal.setupLinks(inputObj);

    }



  },

  // end drawCalendar function

  setupLinks: function(inputObj) {

    // set up link events on calendar table

    var y = document.getElementById('calendar');

    var x = y.getElementsByTagName('a');

    for (var i = 0; i < x.length; i++) {

      x[i].onmouseover = function() {

        this.parentNode.className = 'weekDaysCellOver';

      }

      x[i].onmouseout = function() {

        this.parentNode.className = 'weekDaysCell';

      }

      x[i].onclick = function() {

        document.getElementById(popUpCal.calendarId).style.display = 'none';

        popUpCal.selectedDay = this.innerHTML;

        inputObj.value = formatDate(popUpCal.selectedDay, popUpCal.selectedMonth, popUpCal.selectedYear);

      }

    }

  }



}

// Add calendar event that has wide browser support

if (typeof window.addEventListener != "undefined")

 window.addEventListener("load", popUpCal.init, false);

else if (typeof window.attachEvent != "undefined")

 window.attachEvent("onload", popUpCal.init);

else {

  if (window.onload != null) {

    var oldOnload = window.onload;

    window.onload = function(e) {

      oldOnload(e);

      popUpCal.init();

    };

  }

  else

  window.onload = popUpCal.init;

}



/* Functions Dealing with Dates */



function formatDate(Day, Month, Year) {

  Month++;

  // adjust javascript month

  if (Month < 10) Month = '0' + Month;

  // add a zero if less than 10

  if (Day < 10) Day = '0' + Day;

  // add a zero if less than 10

  var dateString = Month + '/' + Day + '/' + Year;

  return dateString;

}



function getMonthName(month) {

  var monthNames = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

  return monthNames[month];

}



function getDayName(day) {

  var dayNames = new Array('Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday')

  return dayNames[day];

}



function getDaysInMonth(year, month) {

  return 32 - new Date(year, month, 32).getDate();

}



function getFirstDayofMonth(year, month) {

  var day;

  day = new Date(year, month, 0).getDay();

  return day;

}



/* Common Scripts */



function getElementsByClass(searchClass, node, tag) {

  var classElements = new Array();

  if (node == null) node = document;

  if (tag == null) tag = '*';

  var els = node.getElementsByTagName(tag);

  var elsLen = els.length;

  var pattern = new RegExp("(^|\s)" + searchClass + "(\s|$)");

  for (i = 0, j = 0; i < elsLen; i++) {

    if (pattern.test(els[i].className)) {

      classElements[j] = els[i];

      j++;

    }

  }

  return classElements;

}



/* Position Functions */



function setPos(targetObj, moveObj) {

  var coors = findPos(targetObj);

  moveObj.style.position = 'absolute';

  moveObj.style.top = coors[1] + 18 + 'px';

  moveObj.style.left = coors[0] + 'px';

}



function findPos(obj) {

  var curleft = curtop = 0;

  if (obj.offsetParent) {

    curleft = obj.offsetLeft

    curtop = obj.offsetTop

    while (obj = obj.offsetParent) {

      curleft += obj.offsetLeft

      curtop += obj.offsetTop

    }

  }

  return [curleft, curtop];

}

#4

2. สร้างไฟล์ชือว่า calendar.css โค้ดอยู่ข้างล่างครับ

/* CSS Document */



/* calendar style */

#calendarDiv table, #calendarDiv th, #calendarDiv td, #calendarDiv, #calendarDiv a {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 12px;

font-family: inherit;

vertical-align: baseline;

}



div#calendarDiv {

display: block;

display: none;

position: relative;

border: 1px solid #777;

}

div#calendarDiv a {

cursor: pointer;

cursor: hand;

color: #000;

}

table#calendar {

background: #ddd;

clear: both;

text-align: center;

font-size: 105%;

}

table#calendar, #linksTable {

width: 180px;

}

table#calendar .calendarHeader {

background: #0F0A0A url(../../img/fadeto333.gif) top repeat-x;

border-bottom: 1px solid #444;

color: #fff;

}

table#calendar tr.weekDaysTitleRow td {

background: #777;

color: #fff;

}

table#calendar tr.weekDaysRow {

background: #eee;

color: #666;

}

table#calendar td.weekDaysCell {

color: #000;

border: 1px solid #ddd;

}

table#calendar td.weekDaysCellOver {

background: #fff;

border: 1px solid #777;

}

a#closeCalender {

position: absolute;

right: 0;

bottom: 100%;

margin-bottom: 1px;

display: block;

padding: 2px;

cursor: pointer;

cursor: hand;

font-size: 60%;

letter-spacing: 1px;

}

a#closeCalender:hover {

background: #000;

color: #fff;

}

div#calendarDiv table#linksTable td {

background: #000;

}

table#linksTable a {

display: block;

color: #fff;

letter-spacing: 1px;

font-weight: bold;

font-size: 80%;

padding: 2px 5px;

}

table#linksTable a:hover {

background: #ddd;

color: #333;

}

a#prevMonth {

float: left;

}

a#nextMonth {

float: right;

}

td#today {

background: #999;

}

#calendar_cover {

    display: none; /*sorry for IE5*/

    display/**/: block; /*sorry for IE5*/

    position: absolute; /*must have*/

    z-index: -1; /*must have*/

    filter: mask(); /*must have*/

    top: -4px; /*must have*/

    left: -4px; /*must have*/

    width: 193px; /*must have to match width and borders*/

    height: 200px; /*must have to match maximum height*/

}

#5

เท่านี้ก็จะได้ปฎิทินแล้วครับ
#6
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 1024
^