围绕着这个巨大的社区,我们给我们越来越深刻的印象 Bootstrap,一个著名的CSS框架 ,由Twitter创建。 这次我向您介绍一个基于Bootstrap的日历 用Javascript和JQuery编程,我还将详细解释日历的部分操作,并添加一些您可以做的技巧和改进。
这个Bootstrap日历设计简洁,完全 响应,在所有设备上看起来都不错! 它还包含一个 翻译成7种以上的语言 和所有 突出并注明每个国家的节日日期。 奢侈!
这个Bootstrap Calendar的操作有点复杂,它最初从JSON文件中提取用户的日期,但是,专门针对以下用户 Creativos Online我会解释如何 从MYSQL数据库中提取事件 在任何系统中的完美实现。
应用程序主文件的功能:
索引文件
- Bootstrap 2.3.2加载
- 日历设计
- 活动清单
- 浏览日历
- 日历的不同视图(天/周/月/年)
- 在JS中加载应用程序
- 语言选择
索引-BS3.HTML
- Bootstrap 3.0加载
- 日历设计
- 活动列表
- 浏览日历
- 不同的日历视图(天/周/月/年)
- 在JS中加载应用程序
- 语言选择
活动.JSON.PHP
- 具有以下数据的事件列表:
- ID: 事件标识符
- 标题: 活动标题
- 网址: 事件网址
- 类: 事件类型(信息|警告|…)以获取后续颜色。
- 开始: 开始日期
- 结束: 终止日期
应用程序JS
- 存储应用程序配置的变量。
- 额外的JQuery功能
日历
- 主要应用程式设定
- 日历的主要功能
- 事件的提取和处理
- 节日日期
- 语言加载
- 加载事件列表
- 加载不同的日历视图(日/周/月/年)
日历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)); ?>
GitHub | 引导日历
下载| 引导日历
了解更多| 引导程序:CSS框架
当我检查代码塞尔吉奥
该代码已被检查! 唯一的事情是,您必须在数据库中使用以下字段创建«事件»表:{id | 主页| 结束| 名称| 类url}并配置对数据库的访问!
我已经为其他人更改了这些变量,并允许我将事件添加到数据库中,但是我看不到它反映在日历中。 以及如何根据单击日历的日期恢复事件的数据?
要执行并执行事件的创建,则必须创建一个数据库,但是它的作用是我可以向其附加事件,并且默认情况下该语言为西班牙语,因为默认情况下它定义为英语
要将语言预设为西班牙语,最好用calendar.js文件中的英语替换西班牙语文件中的现有字符串。 但是,还有其他更整洁的方法,您可以在脚本的主要网站或此帖子所附的Github社区中找到它们。
另外,我将尝试在几周内上传新帖子,其中将解释如何在数据库中创建事件插入。
非常感谢你,我将不胜感激的帖子插入事件:)
你好,当我解决所有问题以连接并从数据库中提取数据时,我没有任何事件
不在数据库中插入事件
您可以发布如何插入事件吗? 在开始和结束字段中是什么样的数据? 时间戳? 还有“ 0”,我需要插入并能够编辑事件。 谢谢
如果不存在`bootstrap_calendar`,则创建数据库/ *!40100默认字符集utf8收集utf8_spanish_ci * /;
使用`bootstrap_calendar`;
-适用于Win10.13(x5.6.13)的MySQL dump 32 Distrib 86
-
-主机: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'的表结构
-
如果存在`events`,则删除表;
/ *!40101 SET @saved_cs_client = @@ character_set_client * /;
/ *!40101 SET character_set_client = utf8 * /;
创建表`事件`(
`id` int(10)unsigned NOT NULL AUTO_INCREMENT,
`title` varchar(150)收集utf8_spanish_ci默认值为NULL,
`body`文字COLLATE utf8_spanish_ci NOT NULL,
url varchar(150)收集utf8_spanish_ci NOT NULL,
`class` varchar(45)收集utf8_spanish_ci NOT NULL默认'info',
`start` varchar(15)收集utf8_spanish_ci NOT NULL,
`end` varchar(15)收集utf8_spanish_ci NOT NULL,
主键(`id`)
)引擎= InnoDB默认字符集= utf8集合= utf8_spanish_ci;
/ *!40101 SET character_set_client = @saved_cs_client * /;
-
-转储表事件的数据
-
锁表`事件`写;
/ *!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。 非常感谢和问候
您好,日历很好,但是更新日期时不会立即反映在日历中。 我可以做什么 ?
我还有另一个问题,如何在月视图中显示所有点,是否可以扩大正方形? 一天对应什么?
我有一个问题,在本地加载示例时,它可以完美运行,但是当我将其上传到在线服务器时,它仅显示按钮中的日历,不会显示任何内容。 任何想法请问服务器可能是什么或有什么问题要修复它。