우리는 주위를 도는 거대한 커뮤니티에 점점 더 깊은 인상을 받고 있습니다. 잘 알려진 CSS 프레임 워크 인 부트 스트랩 , 트위터 제작. 이번에는 Bootstrap 기반 캘린더를 제시합니다. Javascript 및 JQuery로 프로그래밍, 캘린더 작동의 일부를 자세히 설명하고 몇 가지 트릭과 개선 사항을 추가 할 것입니다.
이 부트 스트랩 달력은 깔끔한 디자인을 가지고 있으며 반응, 그것은 모든 장치에서 좋아 보일 것입니다! 또한 7 개 이상의 언어로 번역 그리고 다 각 국가의 축제 날짜가 강조 표시되고 기록됩니다.. 사치!
이 부트스트랩 달력의 작업은 다소 복잡합니다. 처음에는 JSON 파일에서 사용자 날짜를 추출하지만 Creativos Online방법을 설명하겠습니다. MYSQL 데이터베이스에서 이벤트 추출 모든 시스템에서 완벽하게 구현됩니다.
알려진 데이터베이스 시스템
응용 프로그램의 주요 파일 기능 :
INDEX.HTML
- 부트 스트랩 2.3.2 로딩
- 달력 디자인
- 이벤트 목록
- 달력 탐색
- 다른 달력보기 (일 / 주 / 월 / 년)
- JS에서 애플리케이션로드
- 언어 선택
INDEX-BS3.HTML
- 부트 스트랩 3.0 로딩
- 달력 디자인
- 이벤트 목록
- 달력 탐색
- 다른 달력보기 (일 / 주 / 월 / 년)
- JS에서 애플리케이션로드
- 언어 선택
이벤트.JSON.PHP
- 다음 데이터가 포함 된 이벤트 목록 :
- 아이디 : 이벤트 식별자
- 제목 : 이벤트 제목
- URL : 이벤트 URL
- 수업: 후속 색상에 대한 이벤트 유형 (정보 | 경고 |…).
- 시작 : 시작일
- 종료: 종료 날짜
앱.JS
- 애플리케이션 구성을 저장하는 변수.
- 추가 JQuery 함수
캘린더.JS
- 주요 애플리케이션 설정
- 달력의 주요 기능
- 이벤트 추출 및 처리
- 축제 날짜
- 언어 로딩
- 이벤트 목록로드
- 다른 달력보기로드 (일 / 주 / 월 / 년)
달력.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 프레임 워크
코드 Sergio를 확인하면서
코드는 이미 확인되었습니다! 단, 다음 필드를 사용하여 데이터베이스에«events»테이블을 작성해야합니다. {id | 홈 | 끝 | 이름 | 클래스 | url} 및 데이터베이스에 대한 액세스를 구성하십시오!
다른 사용자를 위해 해당 변수를 변경했으며 이벤트를 데이터베이스에 추가 할 수 있었지만 캘린더에 반영되지 않았습니다. 그리고 캘린더를 클릭 한 날짜에 따라 이벤트 데이터를 어떻게 복구 할 수 있습니까?
이벤트 생성을 수행하고 수행하려면 데이터베이스를 생성해야하지만 핵심은 이벤트를 추가 할 수 있고 기본적으로 영어로 정의되어 있기 때문에 기본적으로 언어를 스페인어로 지정할 수 있다는 것입니다.
언어를 스페인어로 사전 설정하려면 스페인어 파일의 기존 문자열을 calendar.js 파일의 영어 문자열로 바꾸는 것이 가장 좋습니다. 그러나 다른 깔끔한 방법이 있습니다. 스크립트의 메인 웹 사이트 또는이 게시물에 첨부 된 Github 커뮤니티에서 찾을 수 있습니다.
또한 몇 주 후에 데이터베이스에 이벤트 삽입을 생성하는 방법을 설명 할 새 게시물을 업로드하려고합니다.
감사합니다. 이벤트 삽입 포스트에 감사드립니다. :)
안녕하세요 저는 모든 연결을 수정하고 데이터베이스에서 데이터를 추출 할 때 문제가 있습니다. 이벤트가 표시되지 않습니다.
데이터베이스에 이벤트를 삽입하지 않습니다.
이벤트 삽입 방법을 게시 할 수 있습니까? 시작 및 끝 필드에서 어떤 유형의 데이터입니까? 타임 스탬프? "0"이 남아 있습니다. 이벤트를 삽입하고 편집 할 수 있어야합니다. 감사
존재하지 않는 경우 데이터베이스 생성`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 덤프 완료
안녕하세요 migos는 JSON 날짜 형식을 변경하는 방법이 있습니다.
달력은 매우 좋습니다. 새 이벤트를 추가 할 때 기본적으로 시작과 끝의 날짜가 모두 영어 형식 인 경우에만 스페인어로 변경하려면 어떻게해야합니까? DD / MM / YYYY입니다. 대단히 감사합니다.
안녕하세요, 달력은 매우 좋지만 날짜를 업데이트 할 때 달력에 즉시 반영되지는 않습니다. 내가 할 수있는 것 ?
또 다른 문제가 있습니다. 월별보기에 모든 포인트를 표시하려면 어떻게하면 사각형을 확대 할 수 있습니까? 하루에 해당하는 것은 무엇입니까?
예제를로드 할 때 로컬에서 완벽하게 작동하지만 온라인 서버에 업로드 할 때 달력에서 버튼 만 표시되지 않는다는 문제가 있습니다. 문제를 해결하기 위해 서버에 무엇이 잘못되었는지 또는 무엇이 잘못되었는지 알 수 있습니다.