Calendario
Completo
Enero
lu |
ma |
mi |
ju |
vi |
sá |
do |
|
|
|
|
|
|
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
|
|
|
|
|
Histórico de convocatorias
Eventos
-
20 de febrero de 2017
10:30h
Convocatoria de prensa
CONSEJERÍA DE FOMENTO Y MEDIO AMBIENTE
Miranda de Ebro, Burgos. C/ Bilbao esquina con C/ Real Aquende
El consejero de Fomento y Medio Ambiente, Juan Carlos Suárez-Quiñones, visita el Aru Ebro-Entrevías en Miranda de Ebro
-
20 de febrero de 2017
10:30h
Convocatoria de prensa
CONSEJERÍA DE EDUCACIÓN
Valladolid. Cortes de Castilla y León. Sala de usos múltiples. Plaza de las Cortes de Castilla y León, 1.
El consejero de Educación, Fernando Rey, y la presidenta de las Cortes de Castilla y León y de la Fundación Villalar, Silvia Clemente, presentan las unidades didácticas sobre el parlamentarismo en Castilla y León
-
20 de febrero de 2017
10:30h
Convocatoria de prensa
CONSEJERÍA CULTURA Y TURISMO
Salamanca. Universidad de Salamanca. Patio de Escuelas Menores.
La consejera de Cultura y Turismo, María Josefa García Cirac, inaugura la exposición 'Transliteral'.
-
20 de febrero de 2017
10:30h
Presidente de la Junta de Castilla y León
Valladolid. Presidencia de la Junta de Castilla y León. Sala de Mapas.
El presidente de la Junta de Castilla y León, Juan Vicente Herrera, preside la reunión del Grupo de Trabajo de Emigración. Los gráficos podrán tomar imágenes al inicio. Al término, a las 13.00 horas, el vicepresidente y consejero de la Presidencia, José Antonio de Santiago-Juárez, atenderá a los medios de comunicación en la sala de prensa del edificio A.
Responsividad
La parte del búsqueda del componente, calendario y selector de fechas se colocarán en dos columnas por encima de los 800px. En 800px y menos se colocarán cada uno en una fila ocupando todo el ancho disponible.
La parte de resultados, como texto que es, fluirá ocupando todo el ancho disponible.
La paginación fluirá centrada y en línea según el espacio disponible.
Código
<div class="calendario">
<table>
<caption>[Mes]</caption>
<tr>
<th abbr="Lunes">lu</th>
<th abbr="Martes">ma</th>
<th abbr="Miércoles">mi</th>
<th abbr="Jueves">ju</th>
<th abbr="Viernes">vi</th>
<th abbr="Sábado">sá</th>
<th abbr="Domingo">do</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="actual">9</td>
<td>10</td>
<td class="seleccionado">11</td>
<td>12</td>
<td class="actual seleccionado">13</td>
<td>14</td>
<td><a href="">15</a></td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div class="calendario-buscador">
<h2>Histórico de convocatorias</h2>
<form action="" method="post">
<fieldset>
<legend>Selecciona mes y año</legend>
<label for="mes" class="elemento-invisible">Mes</label>
<select id="mes">
<option value="[Mes]">[Mes]</option>
[Meses]
</select>
<label for="anyo" class="elemento-invisible">Año</label>
<select id="mes">
<option value="[Año]">[Año]</option>
[Años]
</select>
</fieldset>
<input id="aceptar" name="aceptar" value="Buscar" type="submit" class="boton">
</form>
</div>
<div class="calendario-resultados">
<h3>Eventos</h3>
<ul>
<li>
<p class="fecha">
<span class="dia">[Fecha]</span>
<span class="hora">[Hora]</span>
</p>
<p class="tipo">[Tipo]</p>
<p>[Texto]</p>
[Más texto]
</li>
</ul>
</div>
</div>
<div class="paginacion">
<p>Página X de Y</p>
<ul>
<li class="primera"><a href=""><span class="elemento-invisible">Primera página</span><<</a></li>
<li class="anterior"><a href=""><span class="elemento-invisible">Página anterior</span><</a></li>
<li><a href=""><span class="elemento-invisible">Página </span>[X]</a></li>
<li class="siguiente"><a href=""><span class="elemento-invisible">Página siguiente</span>></a></li>
<li class="ultima"><a href=""><span class="elemento-invisible">Última página</span>>></a></li>
</ul>
</div>
Compacto
Enero
lu |
ma |
mi |
ju |
vi |
sá |
do |
|
|
|
|
|
|
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
|
|
|
|
|
Filtrar eventos
Responsividad
El calendario y los resultados se colocarán en dos columnas por encima de los 800px. En 800px y menos se colocarán cada uno en una fila ocupando todo el ancho disponible.
Los botones se colocarán en línea por encima de 600px. Por debajo de 600px se colocará en dos líneas, en una los selectores y otra para el botón de buscar. Si los selectores no dispusiesen de espacio se colocarían cada uno en una fila.
Código
<div class="calendario mini">
<h2>[Mes]</h2>
<table>
<tr>
<th abbr="Lunes">lu</th>
<th abbr="Martes">ma</th>
<th abbr="Miércoles">mi</th>
<th abbr="Jueves">ju</th>
<th abbr="Viernes">vi</th>
<th abbr="Sábado">sá</th>
<th abbr="Domingo">do</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="actual">9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div class="calendario-resultados">
<h3>Eventos del mes</h3>
<ul>
</ul>
</div>
<div class="calendario-buscador">
<h3 class="elemento-invisible">Filtrar eventos</h3>
<form action="[action]" method="post">
<fieldset>
<legend class="elemento-invisible">Selecciona mes y año</legend>
<label for="mes" class="elemento-invisible">Mes</label>
<select id="mes">
<option value="[Mes]">[Mes]</option>
[Meses]
</select>
<label for="anyo" class="elemento-invisible">Año</label>
<select id="mes">
<option value="[Año]">[Año]</option>
[Años]
</select>
</fieldset>
<input id="aceptar" name="aceptar" value="Buscar" type="submit" class="boton">
</form>
</div>
</div>
Este buscador ejecuta una búsqueda por AJAX a la url indicada en el action del form.
El formato de JSON que espera recibir es el siguiente:
[
{
"fechaini": "2017-08-29 00:00:00.0",
"fechafin": "2017-09-03 00:00:00.0",
"texto": "XVIII FERIA DE ARTESANÍA DE PALENCIA. PALENCIA",
"dia": [
1,
2,
3
],
"href": ""
},
{
"fechaini": "2017-09-01 00:00:00.0",
"fechafin": "2017-09-01 00:00:00.0",
"texto": "XXXIX FERIA DE CERÁMICA Y ALFARERÍA DE VALLADOLID. VALLADOLID",
"dia": [
1
],
"href": ""
}
]