JQuery를 사용한 부트 스트랩 캘린더

부트 스트랩 캘린더 우리는 주위를 도는 거대한 커뮤니티에 점점 더 깊은 인상을 받고 있습니다. 잘 알려진 CSS 프레임 워크 인 부트 스트랩 , 트위터 제작. 이번에는 Bootstrap 기반 캘린더를 제시합니다. Javascript 및 JQuery로 프로그래밍, 캘린더 작동의 일부를 자세히 설명하고 몇 가지 트릭과 개선 사항을 추가 할 것입니다.

이 부트 스트랩 달력은 깔끔한 디자인을 가지고 있으며 반응, 그것은 모든 장치에서 좋아 보일 것입니다! 또한 7 개 이상의 언어로 번역 그리고 다 각 국가의 축제 날짜가 강조 표시되고 기록됩니다.. 사치!

이 Bootstrap Calendar의 작동은 다소 복잡하며 처음에는 JSON 파일에서 사용자의 날짜를 추출하지만 Creativos Online 사용자에 대해서만 독점적으로 설명하겠습니다. MYSQL 데이터베이스에서 이벤트 추출 모든 시스템에서 완벽하게 구현됩니다.

알려진 데이터베이스 시스템

알려진 데이터베이스 시스템

응용 프로그램의 주요 파일 기능 :

INDEX.HTML

  • 부트 스트랩 2.3.2 로딩
  • 달력 디자인
  • 이벤트 목록
  • 달력 탐색
  • 다른 달력보기 (일 / 주 / 월 / 년)
  • JS에서 애플리케이션로드
  • 언어 선택

INDEX-BS3.HTML

  • 부트 스트랩 3.0 로딩
  • 달력 디자인
  • 이벤트 목록
  • 달력 탐색
  • 다른 달력보기 (일 / 주 / 월 / 년)
  • JS에서 애플리케이션로드
  • 언어 선택

이벤트.JSON.PHP

  • 다음 데이터가 포함 된 이벤트 목록 :
    • 아이디 : 이벤트 식별자
    • 제목 : 이벤트 제목
    • URL : 이벤트 URL
    • 수업: 후속 색상에 대한 이벤트 유형 (정보 | 경고 |…).
    • 시작 : 시작일
    • 종료: 종료 날짜

앱.JS

  • 애플리케이션 구성을 저장하는 변수.
  • 추가 JQuery 함수

CALENDAR.JS

  • 주요 애플리케이션 설정
  • 달력의 주요 기능
  • 이벤트 추출 및 처리
  • 축제 날짜
  • 언어 로딩
  • 이벤트 목록로드
  • 다른 달력보기로드 (일 / 주 / 월 / 년)

CALENDAR.CSS

  • 캘린더 스타일
  • 이벤트 목록 스타일
  • 다른 기기의 캘린더 스타일

데이터베이스에서 이벤트 추출

MYSQL 데이터베이스에서 이벤트를 추출하려면 파일의 줄을 바꿉니다. 이벤트.json.php 기준 :

<?php

$link=mysql_connect("localhost", "usuariodeacceso", "contraseñadeacceso");
mysql_select_db("basededatos",$link) OR DIE ("Error: No es posible establecer la conexión");
mysql_set_charset('utf8');

$eventos=mysql_query("SELECT * FROM events'",$link);

while($all = mysql_fetch_assoc($eventos)){
$e = array();
$e['id'] = $all['id'];
$e['start'] = $all['inicio'];
$e['end'] = $all['final'];
$e['title'] = $all['nombre'];
$e['class'] = $all['clase'];
$e['url'] = $all['url'];
$result[] = $e;
}

echo json_encode(array('success' => 1, 'result' => $result));

?>

깃허브 | 부트 스트랩 캘린더

다운로드 | 부트 스트랩 캘린더

자세히 알아보기 | 부트 스트랩 : CSS 프레임 워크


기사의 내용은 우리의 원칙을 준수합니다. 편집 윤리. 오류를보고하려면 여기에.

14 코멘트, 당신의 것을 남겨주세요

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드가 표시되어 있습니다 *

*

*

  1. 데이터 책임자 : Miguel Ángel Gatón
  2. 데이터의 목적 : 스팸 제어, 댓글 관리.
  3. 합법성 : 귀하의 동의
  4. 데이터 전달 : 법적 의무에 의한 경우를 제외하고 데이터는 제 XNUMX 자에게 전달되지 않습니다.
  5. 데이터 저장소 : Occentus Networks (EU)에서 호스팅하는 데이터베이스
  6. 권리 : 귀하는 언제든지 귀하의 정보를 제한, 복구 및 삭제할 수 있습니다.

  1.   데이비드 Z

    코드 Sergio를 확인하면서

    1. 코드는 이미 확인되었습니다! 단, 다음 필드를 사용하여 데이터베이스에«events»테이블을 작성해야합니다. {id | 홈 | 끝 | 이름 | 클래스 | url} 및 데이터베이스에 대한 액세스를 구성하십시오!

      1.    장미

        다른 사용자를 위해 해당 변수를 변경했으며 이벤트를 데이터베이스에 추가 할 수 있었지만 캘린더에 반영되지 않았습니다. 그리고 캘린더를 클릭 한 날짜에 따라 이벤트 데이터를 어떻게 복구 할 수 있습니까?

  2. 이벤트 생성을 수행하고 수행하려면 데이터베이스를 생성해야하지만 핵심은 이벤트를 추가 할 수 있고 기본적으로 영어로 정의되어 있기 때문에 기본적으로 언어를 스페인어로 지정할 수 있다는 것입니다.

    1. 언어를 스페인어로 사전 설정하려면 스페인어 파일의 기존 문자열을 calendar.js 파일의 영어 문자열로 바꾸는 것이 가장 좋습니다. 그러나 다른 깔끔한 방법이 있습니다. 스크립트의 메인 웹 사이트 또는이 게시물에 첨부 된 Github 커뮤니티에서 찾을 수 있습니다.
      또한 몇 주 후에 데이터베이스에 이벤트 삽입을 생성하는 방법을 설명 할 새 게시물을 업로드하려고합니다.

  3. 감사합니다. 이벤트 삽입 포스트에 감사드립니다. :)

  4.   야일

    안녕하세요 저는 모든 연결을 수정하고 데이터베이스에서 데이터를 추출 할 때 문제가 있습니다. 이벤트가 표시되지 않습니다.

  5.   디에고

    데이터베이스에 이벤트를 삽입하지 않습니다.

  6.   Gonza

    이벤트 삽입 방법을 게시 할 수 있습니까? 시작 및 끝 필드에서 어떤 유형의 데이터입니까? 타임 스탬프? "0"이 남아 있습니다. 이벤트를 삽입하고 편집 할 수 있어야합니다. 감사

  7.   목요일

    존재하지 않는 경우 데이터베이스 생성`bootstrap_calendar` / *! 40100 기본 문자 집합 utf8 COLLATE utf8_spanish_ci * /;
    `bootstrap_calendar` 사용;
    -MySQL 덤프 10.13 Distrib 5.6.13, for Win32 (x86)
    -
    -호스트 : 127.0.0.1 데이터베이스 : bootstrap_calendar
    -——————————————————
    -서버 버전 5.5.27

    / *! 40101 SET @OLD_CHARACTER_SET_CLIENT = @@ CHARACTER_SET_CLIENT * /;
    / *! 40101 SET @OLD_CHARACTER_SET_RESULTS = @@ CHARACTER_SET_RESULTS * /;
    / *! 40101 SET @OLD_COLLATION_CONNECTION = @@ COLLATION_CONNECTION * /;
    / *! 40101 이름 설정 utf8 * /;
    / *! 40103 SET @OLD_TIME_ZONE = @@ TIME_ZONE * /;
    / *! 40103 SET TIME_ZONE = '+ 00:00 ′ * /;
    / *! 40014 SET @OLD_UNIQUE_CHECKS = @@ UNIQUE_CHECKS, UNIQUE_CHECKS = 0 * /;
    / *! 40014 SET @OLD_FOREIGN_KEY_CHECKS = @@ FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS = 0 * /;
    / *! 40101 SET @OLD_SQL_MODE = @@ SQL_MODE, SQL_MODE = 'NO_AUTO_VALUE_ON_ZERO'* /;
    / *! 40111 SET @OLD_SQL_NOTES = @@ SQL_NOTES, SQL_NOTES = 0 * /;

    -
    -테이블`events`의 테이블 구조
    -

    '이벤트'가있는 경우 테이블 삭제;
    / *! 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *! 40101 SET character_set_client = utf8 * /;
    CREATE TABLE`events` (
    `id` int (10) unsigned NOT NULL AUTO_INCREMENT,
    `title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
    `본문` 텍스트 COLLATE utf8_spanish_ci NOT NULL,
    `url` varchar (150) COLLATE utf8_spanish_ci NOT NULL,
    `class` varchar (45) COLLATE utf8_spanish_ci NOT NULL DEFAULT '정보',
    `start` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
    `end` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
    기본 키 (`id`)
    ) 엔진 = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET character_set_client = @saved_cs_client * /;

    -
    -테이블`events`에 대한 데이터 덤프
    -

    잠금 테이블`이벤트`쓰기;
    / *! 40000 ALTER TABLE`events` DISABLE KEYS * /;
    / *! 40000 ALTER TABLE`events` ENABLE KEYS * /;
    테이블 잠금 해제;
    / *! 40103 SET TIME_ZONE = @ OLD_TIME_ZONE * /;

    / *! 40101 SET SQL_MODE = @ OLD_SQL_MODE * /;
    / *! 40014 SET FOREIGN_KEY_CHECKS = @ OLD_FOREIGN_KEY_CHECKS * /;
    / *! 40014 SET UNIQUE_CHECKS = @ OLD_UNIQUE_CHECKS * /;
    / *! 40101 SET CHARACTER_SET_CLIENT = @ OLD_CHARACTER_SET_CLIENT * /;
    / *! 40101 SET CHARACTER_SET_RESULTS = @ OLD_CHARACTER_SET_RESULTS * /;
    / *! 40101 SET COLLATION_CONNECTION = @ OLD_COLLATION_CONNECTION * /;
    / *! 40111 SET SQL_NOTES = @ OLD_SQL_NOTES * /;

    -2014-05-31 14:38:23 덤프 완료

  8.   juan77

    안녕하세요 migos는 JSON 날짜 형식을 변경하는 방법이 있습니다.

  9.   Giselabra

    달력은 매우 좋습니다. 새 이벤트를 추가 할 때 기본적으로 시작과 끝의 날짜가 모두 영어 형식 인 경우에만 스페인어로 변경하려면 어떻게해야합니까? DD / MM / YYYY입니다. 대단히 감사합니다.

  10.   파비안

    안녕하세요, 달력은 매우 좋지만 날짜를 업데이트 할 때 달력에 즉시 반영되지는 않습니다. 내가 할 수있는 것 ?

    또 다른 문제가 있습니다. 월별보기에 모든 포인트를 표시하려면 어떻게하면 사각형을 확대 할 수 있습니까? 하루에 해당하는 것은 무엇입니까?

  11.   알렉스

    예제를로드 할 때 로컬에서 완벽하게 작동하지만 온라인 서버에 업로드 할 때 달력에서 버튼 만 표시되지 않는다는 문제가 있습니다. 문제를 해결하기 위해 서버에 무엇이 잘못되었는지 또는 무엇이 잘못되었는지 알 수 있습니다.