A-AA+then

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

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

6 ความคิดเห็น

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

อย่างแรกเลย ที่จะต้องทำ คือ 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/article/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.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.onmouseover = function() {
        this.parentNode.className = 'weekDaysCellOver';
      }
      x.onmouseout = function() {
        this.parentNode.className = 'weekDaysCell';
      }
      x.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.className)) {
      classElements[j] = els;
      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
^