GORAGOD.com

freelance, web developer, web designer, hosting, domain name

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

jack_d2b

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

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



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



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



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



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

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



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

<div id="calendarDiv"></div>
#2
บอย1

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



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

<link href="css/calendar.css" rel="stylesheet">
#3
บอย1

สร้างโฟเดอร์ 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
บอย1

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
บอย1

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