Widget Calendario avanzato con Allgenda

1. un widget che elenca i prossimi eventi del calendario e li visualizza in un medaglione
   
2. un widget che mostra il tuo calendario del sito allgenda .com sul portale
   
3. una pagina che mostra il sito allgenda .com con un collegamento nella navigazione del sito

Crea un calendario e un gruppo su Allgenda.com

• non selezionare "Attiva calendario personale" (puoi modificare questa decisione in seguito)
  
• se il tuo gruppo è collegato a un videogioco gestito da Allgenda, scegli il tipo di Gilda che prevede l'iscrizione per appuntamenti con un personaggio. Altrimenti scegli il tipo Normale (registrazione per appuntamenti a tuo nome).
  
• lascia il livello di diritti "Membro" ai tuoi ospiti.
  
• seleziona "Consenti l'accesso al gruppo" per avere un codice di accesso da comunicare ai tuoi futuri membri senza che tu debba invitarli tu stesso.
  
• seleziona il tema che desideri scorrendo la miniatura in alto a destra. Sarà associato al tuo gruppo.

Widget dei prossimi eventi futuri

Ecco la procedura da seguire:

1. Vai a Moduli> HTML e Javascript> Gestione del codice Javascript
   
2. Attiva la gestione dei codici javascript
   
3. Crea un nuovo javascript con la seguente configurazione:
   
   • Titolo: a tua scelta
     
   • Dove: Sul portale
     
   • Copia il seguente codice sostituendo ID_Groupe_Allgenda con l'identificatore numerico del tuo gruppo su Allgenda (*) e NB_EVENEMENTS con un valore a tua scelta (consigliato da 3 a 7).
     

     Codice:

     function AllgendaWidget() {
}
function showAllgendaWidget(json) {
  aw.show(json);
}
AllgendaWidget.prototype = {imgPath:null, groupId:ID_Groupe_Allgenda, nbEvts:NB_EVENEMENTS, show:function(json) {
  var evts = json.events, evt, list = $("#allgendaEvents");
  this.imgPath = json.img_path;
  if (evts) {
    for (var i = 0;i < evts.length;++i) {
      list.append(this.getEvent(evts[i]));
    }
  }
}, getEvent:function(evt) {
  var sD = new Date(evt.startDate), eD = new Date(evt.endDate), e = "<li><img class='allgendaIco' src='" + this.imgPath + "/" + evt.img + "'></img>";
  e += "<table><tr><td valign='top' class='allgendaTi'>" + decodeURIComponent(evt.title.replace(/\+/g, "%20"));
  if (evt.part_cnt) {
    e += "<br /><span class='allgendaSub'>" + evt.part_cnt + "</span>";
  }
  e += "</td><td class='allgendaDt'><table><tr><td>" + this.ftDate(sD) + "</td></tr>";
  e += "<tr><td>" + this.ftDate(eD) + "</td></tr></table>";
  e += "</td></tr></table>";
  e += "</li>";
  return e;
}, loadEvents:function() {
  $.ajax({type:"POST", url:"http://www.allgenda.com", dataType:"jsonp", data:{actionId:"63", gid:this.groupId, w:1, noe:this.nbEvts}});
}, openAllgenda:function() {
  window.open("http://www.allgenda.com/?agendaView=2&agendaType=4&aId=" + this.groupId, "_blank");
}, ftDate:function(d) {
  var da = d.getDate(), m = d.getMonth() + 1, y = d.getFullYear(), h = d.getHours(), mi = d.getMinutes();
  if (m < 10) {
    m = "0" + m;
  }
  if (h < 10) {
    h = "0" + h;
  }
  if (mi < 10) {
    mi = "0" + mi;
  }
  var dt = da + "/" + m + "/" + y + " " + h + ":" + mi;
  return dt;
}};

Widget di visualizzazione di Allgenda.com sul portale

1. Vai a Moduli> Portale e widget> Gestione dei widget del forum
   
2. Seleziona "Crea un widget personalizzato" con la seguente configurazione:
   
   • Nome: Allgenda
     
   • Titolo widget: Allgenda
     
   • Passa alla modalità HTML
     
   • Inserisci il seguente codice giocando con le dimensioni che preferisci e utilizzando l'indirizzo per l'accesso diretto ai calendari del tuo gruppo (**)
     

     Codice:

     <iframe id="allgendaFrame" style="width:100%; height:800px;"></iframe> <script>
  document.getElementById("allgendaFrame").setAttribute("src","http://www.allgenda.com");
</script>

Link ad Allgenda.com nella tua navigazione

1. Vai a Moduli> HTML e Javascript> Gestisci pagine HTML
   
2. Fare clic su "Creazione in modalità avanzata (HTML)"
   
3. Titolo: Allgenda .com
   
4. Seleziona Sì per utilizzare la parte superiore e inferiore della pagina
   
5. Inserisci il seguente codice nel contenuto della pagina, sostituendo l'indirizzo del sito Allgenda .com con link diretti ai tuoi calendari di gruppo (**)
   

   Codice:

    
<iframe id="allgendaFrame" style="width:100%; height:800px;"></iframe>
 
<script>
  $("#allgendaFrame").attr("src","http://www.allgenda.com");
</script>

   
   
6. registrare
   
7. Copia l'indirizzo della pagina che si trova nella colonna "URL link"
   
8. Vai a Visualizza> Home page> Intestazione e navigazione
   
9. Fare clic su "Aggiungi un menu personalizzato"
   
10. Menu: Allgenda
    
11. : Allgenda .com
    
12. URL di reindirizzamento: incolla l'indirizzo della pagina Forumattivo copiata in 7.
    
13. Registrare

Aggiornato a marzo 2015

Modifica del codice JS

Codice:

function AllgendaWidget() {}
 
function showAllgendaWidget(json)
{
  aw.show(json);
}
 
AllgendaWidget.prototype =
{
  imgPath:null,
  groupId:X,
  nbEvts:4,
 
  show : function(json)
  {
      var evts = json.events, evt, list;
      if(json.target)
        list = $("#"+json.target);
      else
        list = $("#allgendaEvents");
 
      this.imgPath = json.img_path;
 
      if (evts) {
        for (var i = 0;i < evts.length;++i)
        {
            list.append(this.getEvent(evts[i]));
        }
      }
  },
 
  getEvent : function(evt)
  {
      var sD = new Date(evt.startDate),
        eD = new Date(evt.endDate),
        e = "<li><img class='allgendaIco' src='" + this.imgPath + "/" + evt.img + "'></img>";
 
      e += "<table><tr><td valign='top' class='allgendaTi'>" + decodeURIComponent(evt.title.replace(/\+/g, "%20"));
 
      if (evt.part_cnt)
      {
        e += "<br /><span class='allgendaSub'>" + evt.part_cnt + "</span>";
      }
 
      e += "</td><td class='allgendaDt'><table><tr><td>" + this.ftDate(sD) + "</td></tr>"; e += "<tr><td>" + this.ftDate(eD) + "</td></tr></table>"; e += "</td></tr></table>"; e += "</li>";
 
      return e;
  },
 
  loadEvents : function(targetId,groupId)
  {
      var data = {actionId:"63", w:1, noe : this.nbEvts};
 
      if(targetId)
        data.target=targetId;
 
      if(groupId)
        data.gid=groupId;
      else
        data.gid=this.groupId;
 
      $.ajax({type:"POST", url:"http://www.allgenda.com", dataType:"jsonp", data:data});
  },
 
  openAllgenda:function(groupId)
  {
      var target=groupId;
      if(!target)
        target=this.groupId;
      window.open("http://www.allgenda.com/?agendaView=2&agendaType=4&aId=" + target, "_blank");
  },
 
  ftDate:function(d)
  {
      var da = d.getDate(), m = d.getMonth() + 1, y = d.getFullYear(), h = d.getHours(), mi = d.getMinutes();
      if (m < 10) { m = "0" + m; }
      if (h < 10) { h = "0" + h; }
      if (mi < 10) { mi = "0" + mi; }
      var dt = da + "/" + m + "/" + y + " " + h + ":" + mi; return dt;
  }
};

Aggiungi un widget al portale

Codice:

 
<style>
 
.allgendaIco
{
width:48px;
heigth:48px;
float:left;
margin-right:3px;
}
 
.allgendaDt
{
font-size:8px;
font-weight:bold;
width:100%;
float:right;
}
 
.allgendaSub
{
font-weight:normal;
color:green;
}
 
.allgendaTi
{
font-weight:bold;
width:70px;
}
 
.allgendaUL
{
padding-left:0 !important;
cursor:pointer;
}
 
.allgendaUL li
{
list-style-type:none;
clear:both;
}
 
</style> <script>
var aw = aw || new AllgendaWidget();
</script>
 
<ul id="allgendaEventsGroupN" class='allgendaUL' onclick="aw.openAllgenda(X);"></ul>
 
<script>
aw.loadEvents("allgendaEventsGroupN",X);
</script>

Aggiornamento marzo 2016

• Lo strumento ora consente " agende pubbliche ": vale a dire che i visitatori potranno vedere i calendari condivisi con il pubblico senza dover creare un account o connettersi.
  
• il calendario principale di ogni nuovo gruppo sarà pubblico per impostazione predefinita .
  
• Solo il nome, l'immagine e la descrizione dell'evento possono essere visibili al pubblico. L' elenco dei dichiaranti e i loro commenti rimangono privati .
  
• Fai attenzione a indicare il collegamento diretto ai calendari come indicato nel tutorial in modo che i visitatori possano vedere i calendari in questione.
  
• Se hai già un gruppo configurato, vai su Configurazione -> I miei gruppi -> Calendari per posizionare i diritti concessi al pubblico.