Estamos cada vez mais impressionados com a imensa comunidade que gira em torno Bootstrap, um framework CSS bem conhecido , criado pelo Twitter. Desta vez, apresento a vocês um calendário baseado em Bootstrap programado com Javascript e JQueryAlém disso, explicarei em detalhes parte do funcionamento do calendário e adicionarei alguns truques e melhorias que você pode fazer.
Este calendário Bootstrap tem um design limpo e é totalmente responsivo, ficará bem em todos os dispositivos! Ele também incorpora um tradução em mais de 7 idiomas e tudo as datas festivas de cada país são destacadas e anotadas. Um luxo!
O funcionamento deste Bootstrap Calendar é um tanto complexo, ele extrai as datas do usuário de um arquivo JSON inicialmente, mas, exclusivamente para usuários de Creativos Onlinevou explicar como extrair os eventos de um banco de dados MYSQL para sua perfeita implementação em qualquer sistema.
Sistema de banco de dados bem conhecido
Funções dos principais arquivos do aplicativo:
ÍNDICE.HTML
- Carregamento do Bootstrap 2.3.2
- Design do calendário
- Lista de Eventos
- Navegando no calendário
- Diferentes visualizações do calendário (dia / semana / mês / ano)
- Carregando o aplicativo em JS
- Seleção de idioma
ÍNDICE-BS3.HTML
- Carregamento do Bootstrap 3.0
- Design do calendário
- Lista de evento
- Navegando no calendário
- Diferentes visualizações do calendário (dia / semana / mês / ano)
- Carregando o aplicativo em JS
- Seleção de idioma
EVENTOS.JSON.PHP
- Lista de eventos com os seguintes dados:
- ID: identificador de evento
- título: Título do evento
- url: url do evento
- classe: tipo de evento (info | aviso |…) para cores subsequentes.
- Сomeçar: data de início
- fim: Data de finalização
APP.JS
- Variáveis que armazenam a configuração do aplicativo.
- Funções JQuery extras
CALENDÁRIO.JS
- Configurações principais do aplicativo
- Principais funções do calendário
- Extração e tratamento de eventos
- Datas festivas
- Carregando idioma
- Carregando a lista de eventos
- Carregando as diferentes visualizações do calendário (dia / semana / mês / ano)
CALENDÁRIO.CSS
- Estilos de calendário
- Estilos de lista de eventos
- Estilos de calendário para outros dispositivos
Extraia eventos de um banco de dados
Para extrair os eventos de um banco de dados MYSQL vamos substituir as linhas do arquivo eventos.json.php por:
<?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 | Calendário Bootstrap
Baixar | Calendário Bootstrap
Saiba mais | Bootstrap: CSS Framework
enquanto eu verifico o código Sergio
O código já foi verificado! A única coisa, você tem que criar a tabela «eventos» em seu banco de dados com os seguintes campos: {id | casa | fim | nome | classe | url} e configure o acesso ao seu banco de dados!
Mudei essas variáveis para outras pessoas e isso me permitiu adicionar o evento ao meu banco de dados, mas não o vejo refletido no calendário. E como posso recuperar os dados dos eventos dependendo do dia em que clico no calendário?
Para fazer e realizar a criação de eventos, então um banco de dados deve ser criado, mas do que se trata é que posso anexar eventos a ele e por padrão o idioma espanhol porque é definido como Inglês por padrão
Para predefinir o idioma como espanhol, é melhor substituir as strings existentes no arquivo do idioma espanhol pelas do inglês no arquivo calendar.js. No entanto, existem outros métodos mais simples, você pode encontrá-los no site principal do script ou na comunidade do Github, anexado a este post.
Além disso, tentarei fazer upload de um novo post em algumas semanas onde explicarei como criar a inserção de eventos no banco de dados.
Muito obrigado, vou agradecer o post de inserir eventos :)
olá eu tenho um problema quando eu conserto tudo para conectar e extrair meus dados do banco de dados ele não mostra nenhum evento
não insere evento no banco de dados
Você poderia postar como inserir eventos? nos campos inicial e final, que tipo de dado é? timestamp? sobraram "0", preciso inserir e poder editar os eventos. Obrigado
CRIAR BASE DE DADOS SE NÃO EXISTIR `bootstrap_calendar` / *! 40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci * /;
USE `bootstrap_calendar`;
- MySQL dump 10.13 Distrib 5.6.13, para Win32 (x86)
-
- Host: 127.0.0.1 Banco de dados: bootstrap_calendar
- ——————————————————
- Versão do servidor 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 DEFINIR NOMES 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 * /;
-
- Estrutura da tabela para `eventos` da tabela
-
DROP TABLE SE EXISTE `eventos`;
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET character_set_client = utf8 * /;
CREATE TABLE `eventos` (
`id` int (10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
texto `body` COLLATE utf8_spanish_ci NOT NULL,
`url` varchar (150) COLLATE utf8_spanish_ci NÃO NULO,
`class` varchar (45) COLLATE utf8_spanish_ci NOT NULL DEFAULT 'info',
`start` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
`end` varchar (15) COLLATE utf8_spanish_ci NÃO NULO,
CHAVE PRIMÁRIA (`id`)
) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- Dumping de dados para a tabela `eventos`
-
BLOQUEAR TABELAS `eventos` ESCREVER;
/ *! 40000 ALTER TABLE `events` DISABLE KEYS * /;
/ *! 40000 ALTER TABLE `events` ENABLE KEYS * /;
DESBLOQUEAR TABELAS;
/ *! 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 * /;
- Despejo concluído em 2014/05/31 14:38:23
Olá, migos, existe alguma maneira de alterar o formato de data JSON
O calendário é muito bom, só ao adicionar um novo evento a data que leva por padrão tanto no início quanto no final está no formato inglês, como faço para mudar para espanhol? Seria DD / MM / AAAA. Muito obrigado e saudações
Olá, o calendário é muito bom, mas ao atualizar uma data não é refletido imediatamente no calendário. Que posso fazer ?
Estou com outro problema também, como faço para visualizar todos os pontos na visualização mensal, é possível ampliar o quadrado? o que corresponde a um dia?
Tenho o problema de que localmente ao carregar o exemplo funciona perfeitamente, mas quando faço upload para um servidor online não me mostra nada do calendário apenas os botões. Alguma ideia do que pode ser ou o que está errado com o servidor para consertar por favor.