실시간 달력에 자바스크립트와 PHP

StackOverflow https://stackoverflow.com/questions/707405

문제

자바스크립트 달력에 대한 코드가 있는데 페이지가 로드될 때 생성되므로 완벽하게 작동합니다.그런데 이벤트를 추가할 수 있는지 궁금합니다.사용자가 "이벤트" 클래스가 있는 td 위로 마우스를 가져가면 이벤트가 표시될 수 있는 플러그인(jQuery)을 찾았습니다.그래서 이 달력은 제가 사용하는 것이 아니라 개발에 대해 아무것도 모르는 다른 사람이 사용하게 될 것이기 때문에 그녀가 이벤트를 업로드할 수 있도록 PHP 파일을 만들거나 업로드할 수 있는 방법이 있는지 궁금합니다.내 말은, 그녀가 3일에 이벤트를 원하고 파일을 업로드하고 PHP가 그것을 읽고 자바스크립트에 해당 날짜에 "이벤트" 클래스를 추가하라고 지시하면 jQuery가 나머지 작업을 수행한다고 가정해 보겠습니다.가능합니까?나는 그것을 어떻게 해야 할지조차 알 수 없고, 내가 직접 설명했으면 좋겠다.여기 내 자바스크립트가 있습니다.

function buildCal(){
    var d = new Date();
    var month = d.getMonth()+1;
    var year = d.getFullYear();
    var monthName=['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
    var daysInMonth=[31,0,31,30,31,30,31,31,30,31,30,31];

    var objectDay = new Date(year, month-1, 1); //fix date bug when current day is 31st
    objectDay.od=objectDay.getDay()+1; //fix date bug when current day is 31st

    var todaydate=new Date() 
    var scanfortoday=(year==todaydate.getFullYear() && month==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added

    daysInMonth[1]=(((objectDay.getFullYear()%100!=0)&&(objectDay.getFullYear()%4==0))||(objectDay.getFullYear()%400==0))?29:28;

    var t='<div class="main"><table class="main" cols="7" cellpadding="0" border="0" cellspacing="0">';
    t+='<h3 class="monthCSS" align="center">'+monthName[month-1]+' - '+year+'</h3><tr align="center">';


    for(s=0;s<7;s++)t+='<td class="daysofweek">'+"DoLuMaMiJuViSa".substr(s*2,2)+'</td>';

    t+='</tr><tr align="center">';
    for(i=2;i<=42;i++){
        var x=((i-objectDay.od>=0)&&(i-objectDay.od<daysInMonth[month-1]))? i-objectDay.od+1 : '&nbsp;';
            if (x==scanfortoday)
                x='<td class="today">'+x+'</td>'
            t+='<td class="days">'+x+'</td>';
        if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
    }
    return t+='</tr></table></div>';
}

여기에서 볼 수 있듯이 실제 날짜가 될 때까지 공백을 추가합니다.(x가 숫자가 아닌지) 확인한 다음 td class="padding" 을 추가하려고 했습니다. 그러나 이를 위해 x.match(/[0-9]+/)를 사용하려고 했지만 실패했습니다. 작동하지 않는 것 같고 자바 스크립트로 정규식을 사용하려고 시도하는 것이 처음이 될 것입니다. 왜 그것이 잘못된 것인지 아는 사람이 있습니까?아니면 실제로 확인하는 방법은 무엇입니까?

편집하다

이 스크립트에 뭔가 이상한 일이 일어나고 있는데 왜 그런지 모르겠습니다. 

t+='<td class="days">'+x+'</td>';

에게

t+='<td class="days' + x +'">'+x+'</td>';

이렇게 하면 각 td를 선택할 수 있지만 이렇게 하면 다음을 포함하는 새 td가 생성됩니다. 

<td id="days&lt;td class=" today="">1</td>

나는 왜 이런 일이 발생하는지 전혀 모릅니다. 나중에 ">가 인쇄되기 때문에 코드가 엉망이라는 것을 알고 있습니다(이 새로운 td로 인한 따옴표 불일치로 인해...왜 이런 일이 발생합니까?

도움이 되었습니까?

해결책

내가 만든 달력 시스템은 해당 달의 전체 PHP 배열을 사용합니다.이를 반복할 수 있도록 해당 빈 날짜 테이블 셀마다 해당 날짜에 대한 빈 배열이 있습니다.

예를 들어

$calendar_dates = array(
              [week_1] = array(
                     [sun] = Null
                     [mon] = NULL
                     [tue] = array(
                            [events] = array(
                                    event_id => 'event name'
                                    event_name => ''
                                    event_time => ''
                             )
                     [wed]
                     ...
                 )
              [week_1] => array()
              ...........
  )

지정된 날짜와 현재 주에서 배열을 생성하여 일 배열을 만듭니다.

그런 다음 해당 범위의 이벤트를 얻기 위해 데이터베이스를 쳤습니다.

그런 다음 이벤트를 순환하고 달력 배열에 연결합니다.

매력처럼 작동합니다.

자바스크립트와 함께 작동하게 하려면 달력 날짜의 시작과 종료를 제어하는 ​​html 파일의 헤드에 특정 자바스크립트를 에코하도록 하면 됩니다.

클라이언트에게 웹 양식의 이벤트를 입력/편집할 수 있는 간단한 로그인 페이지를 제공합니다.

다른 팁

이벤트 데이터를 서버에서 캘린더가 포함 된 웹 페이지로 푸시하려는 것 같습니다. 이것이 가능하지만, 어렵고 일반적으로 노력할만한 가치가 없습니다. 캘린더에 Ajax를 구축하고 5 분 또는 10 분 정도마다 이벤트 업데이트를 위해 서버를 폴링하는 것이 좋습니다. 새로운 이벤트가 업로드 될 때와 캘린더에 표시 될 때 사이에 약간의 지연이 발생하지만 개발하기가 훨씬 쉽습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top