Pàgina del calendari amb 2 columnes

Pàgina del calendari amb 2 columnes

per MIGUEL TARAZONA BELENGUER -
Nombre de respostes: 15

Hola

He modificat la pàgina del calendari de forma que divideixo el contingut en 2, a l'esquerra els events en format agenda i a la dreta la visualització del calendari. D'aquesta forma ens agrada més, ho veiem més estètic i es mostra tota la informació en una sola pantalla.

Però al haver-ho fet mitjançant un div 50% width, resulta que també em divideix la pàgina al mòbil. Algú pot pensar per que el disseny sigui una mica més "responsive" i no em divideixi aquesta pàgina quan estic a un mòbil sinò que el calendari salti cap a baix?

El codi que he afegit és el següent:

<div>
<div style='width: 50%; float: left; padding: 2px'>
Els propers events són:
[gcal id="248, 425" interval="events" interval_count="5" display="grouped-list"]
</div>
<div style='width: 50%; float: left; padding: 2px'>
Aquí podeu consultar el calendari escolar del centre.
[google-calendar-events id="248, 425" type="ajax"]
</div>
</div>

 

i podeu veure el resultat aquí.

Moltes gràcies.

En resposta a MIGUEL TARAZONA BELENGUER

Re: Pàgina del calendari amb 2 columnes

per MIGUEL TARAZONA BELENGUER -

Ja ho tinc solucionat. Jo mateix em responc:

min-width: 300px;

ia ja es veu perfectament!

Podem polir una mica més les mides, però ja va bé.

En resposta a MIGUEL TARAZONA BELENGUER

Re: Pàgina del calendari amb 2 columnes

per AGUSTI BARBOLLA RODRIGUEZ -

Hola Miquel podríes escriure com queda definitivament el codi?

Gràcies

En resposta a AGUSTI BARBOLLA RODRIGUEZ

Re: Pàgina del calendari amb 2 columnes

per MONICA GRAU PRIETO -

Hola Agustí,

pel que diu en Miquel, afegint el min-width hauria de quedar així:

<div>
  <div style='min-width: 300px; width: 50%; float: left; padding: 2px'>
  Els propers events són:
  [gcal id="248, 425" interval="events" interval_count="5" display="grouped-list"]
  </div>
  <div style='min-width: 300px; width: 50%; float: left; padding: 2px'>
  Aquí podeu consultar el calendari escolar del centre.
  [google-calendar-events id="248, 425" type="ajax"]
  </div>
</div>

Fins ara,

Mònica

En resposta a MONICA GRAU PRIETO

Re: Pàgina del calendari amb 2 columnes

per MIGUEL TARAZONA BELENGUER -

És exactament com ho tinc!

En resposta a MIGUEL TARAZONA BELENGUER

Re: Pàgina del calendari amb 2 columnes

per AGUSTI BARBOLLA RODRIGUEZ -

gràcies a tots dos. Una excel-lent idea.

En resposta a AGUSTI BARBOLLA RODRIGUEZ

Re: Pàgina del calendari amb 2 columnes

per Roser Cervera Giralt -

Hola!

M'ha agradat molt aquesta proposta de visualitzar el calendari amb dues columnes. Estic intentant però copiar el codi i no me n'ensurto. No tinc molt clar si l'haig de copiar, al principi, al final, al mig, si haig de suprimir el codi que ja hi havia,...

Em podeu donar un cop de mà?


Gràcies, 

Roser Cervera

INS Baix a mar

En resposta a Roser Cervera Giralt

Re: Pàgina del calendari amb 2 columnes

per MONICA GRAU PRIETO -

Hola Roser,

en aquest cas el que han fet el companys és, o bé crear una pagina nova amb el calendari o bé fer servir la pàgina del calendari del vostre Nodes (hauria d'estar a l'apartat Pàgines). A la pàgina en qüestió has de posar tot el codi i canviar l'ID del teu calendari on t'he marcat en groc. El codi no l'has de posar abans ni després, l'has de substituir sencer, si fas servir la pàgina amb el calendari per defecte has d'eliminar el que apareix i posar això.

<div>
<div style='min-width: 300px; width: 50%; float: left; padding: 2px'>
Els propers events són:
[gcal id="248" interval="events" interval_count="5" display="grouped-list"]
</div>
<div style='min-width: 300px; width: 50%; float: left; padding: 2px'>
Aquí podeu consultar el calendari escolar del centre.
[google-calendar-events id="248" type="ajax"]
</div>
</div>

Fent això hauries de visualitzar el calendari en dues columnes.

Fins ara,

Mònica

En resposta a MONICA GRAU PRIETO

Re: Pàgina del calendari amb 2 columnes

per VICENTE PASTOR MARZO -
Hola,

intento modificar el codi i copiar-lo al calendari però no es visualitza en dues columnes.

Al nostre centre hem creat dues agendes per als alumnes i ens agradaria que es pogués veure en dues columnes però no ho aconsegueixo...

Podríeu indicar exactament on s'ha d'afegir o incloure per complet el codi???

Moltes gràcies.


Vicent 

insdecaldes.cat


En resposta a VICENTE PASTOR MARZO

Re: Pàgina del calendari amb 2 columnes

per MONICA GRAU PRIETO -

Hola Vicent,

el codi l'heu d'afegir a la pàgina on tingueu incrustat el calendari/agenda. Sobretot l'heu d'enganxar a la pestanya "Text". Si voleu, ens podeu passar l'enllaç a aquesta pàgina i mirem perquè no us està funcionant.

Fins ara,

Mònica

En resposta a MONICA GRAU PRIETO

Re: Pàgina del calendari amb 2 columnes

per VICENTE PASTOR MARZO -

Hola Mònica,

et passo captura de pantalla del codi que poso en el calendari. Després t'indico link a la pàgina on tenim l'enllaç per separat a les dues agendes dels grups/classe. Podria ser que el problema fos que utilitzo un link en compte de posar el calendari directament???


Enllaç a la pàgina on surt quina agenda visualitzar.

Gràcies,


Vicent

www.insdecaldes.cat

En resposta a VICENTE PASTOR MARZO

Re: Pàgina del calendari amb 2 columnes

per MONICA GRAU PRIETO -

Hola Vicent,

per poder visualitzar el calendari en 2 columnes el que has de fer és:

  1. Crear el calendari, amb els paràmetres per defecte (això ja ho has fet).
  2. Crear dues pàgines (Tauler | Pàgines) i en aquesta pàgina enganxar el codi de les dues columnes substituint l'ID del calendari.
    1. Agenda 1r ESO A
    2. Agenda 1r ESO B
  3. Modificar els enllaços de la pàgina Agendes perquè apuntin a les pàgines creades amb el calendari i no directament al calendari.

Ja ens diràs si amb el pas a pas ho aconseguiu i si no ens ho dieu i us donem un cop de mà.

Fins ara,

Mònica

En resposta a MONICA GRAU PRIETO

Re: Pàgina del calendari amb 2 columnes

per VICENTE PASTOR MARZO -

Hola Mònica,

Ja ho he fet com m'has indicat i surt molt bé!!!!

Moltes gràcies!!!


Vicent

www.insdecaldes.cat