Termin Kalender für deine Homepage

[Jasko]

Hallo moni,

Ja das kann gut sein das sich da die css in die Quere kommen. Ich habe den einbau ganz bewusst in zwei farblich und stylisch ganz verschiedene styles gemacht das man sehen kann das eine anpassung an die eigene HP kein Problem ist.

[moni]

Hallo Jasmin ... habe den Kalender zu erst einfach so wie der ist an meine webspace geladen ..

http://www.blicke1.de/event-kalender/index.php

In den config.php entsprechend die angaben gemacht doch komme dann nicht weiter mit den Termine einfügen !

Wie komme ich an so diese Seite ?
http://jaskoscript.net/calender/

Habe auch in den Datenbank rein geschaut und könnte kein neuen Eintrag finden, auch komisch
Brauche deine Hilfe beim Installieren !

wen der einwandfrei installiert wird da will erst dann an mein style anpassen

[Butterblume]

Ich hab meine Termine schon drin!

http://www.karins-servietten.de/kreativ ... lender.php

[Jasko]

In den config.php entsprechend die angaben gemacht doch komme dann nicht weiter mit den Termine einfügen !

Wie komme ich an so diese Seite ?
http://jaskoscript.net/calender/

Habe auch in den Datenbank rein geschaut und könnte kein neuen Eintrag finden, auch komisch
Brauche deine Hilfe beim Installieren !

Hallo moni,

ich habe jetzt einige änderungen am Kalender gemacht, nichts großartiges, aber bevor du weiter machst, hole dir am bessten die neue Version von Github. Die hat jetzt eine installations Datei drin.

Du machst wieder wie auch vorher, die config.php anpassen, und dann rufst du die install.php Datei im browser auf, wenn du in der config.php alles richtig eingegeben hast sollte jetzt nur eine Zeile ausgegeben werden, mit der Info das die Tabelle eventcalender erfolgreich angelegt wurde. Jetzt kannst du die veränderungen machen die du möchtest.

Vorher musste man auch die Tabele in der Datenbank selber anlegen, darum hat es bei dir nicht geklappt.

MFG

[moni]

Danke Jasmin ! es hat gut geklappt ,nur noch an die style anpassen

http://www.blicke1.de/event-kalender/index.php

[Butterblume]

Hast deine Mittagspause schon drin!

[moni]

Hallo Jasmin .. den kalender-selber lässt sich farblich usw gut gestellten doch das einbinden in das Design da hatte ich Probleme gehabt

hier meine Kalender pur
http://www.blicke1.de/event-kalender/index.php

hier eingebaut per include ....
http://www.blicke1.de/event-kalender/kalender.php

das Design ist zerrissen und auch sonstigen Text verändert
habe versucht in den Bootsrtap css einiges zu ändern aber viel hat das nicht gebracht , kann sein das ich die falschen Sachen erwischt habe


erst per iframe da sieht alles gut aus, und denke kann so bleiben
http://www.blicke1.de/event-kalender/termine.php

was meinst du dazu ?

[Jasko]

Hallo moni,

include ist hier auch keine gute methode den Kalender einzubinden, da ja der ganze code aus der index.php Datei in deine bestehnde Datei übertragen wird, also auch die Doppelten Meta Tags, die Doppelten body tags usw. Eine andere Möglichkeit ist das einbinden per iframe das du gemacht hast und das sicher funktioniert, vor allem beim Kalender der in der Höhe nicht großartig verändert wird undsomit super klappt.

Doch beim erstellen der App (Software) dachte ich auch daran das der Kalender in ein Design oder eine Unterelement in einer Datei sein kann, dacher kann man den Kalender auch per Code in die eigene Datei holen.

Also diesen Code an die Stelle einsetzen wo der kalender zu sehen sein soll:

Code: Alles auswählen

<div class="calender">
    <table class="table table-bordered">
      <thead>
        <tr>
          <td><a id="previusMonth" href="?y=<?=$y?>&m=<?=$m?>"><<</a></td>
          <td><center><span id="selectedMonth"></span></center></td>
          <td><a id="nextMonth" href="?y=<?=$y?>&m=<?=($m+2)?>">>></a></td>
          <td></td>
          <td><a id="previusYear" href="?y=<?=($y-1)?>&m=<?=($m+1)?>"><<</a></td>
          <td><center><span id="selectedYear"><?=$y?></span></center></td>
          <td><a id="nextYear" href="?y=<?=($y+1)?>&m=<?=($m+1)?>">>></a></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><?=$lg['MON']?></td>
          <td><?=$lg['TUE']?></td>
          <td><?=$lg['WED']?></td>
          <td><?=$lg['THU']?></td>
          <td><?=$lg['FRI']?></td>
          <td><?=$lg['SAT']?></td>
          <td><?=$lg['SUN']?></td>
        </tr>
        <tr>
          <td id="d1"></td>
          <td id="d2"></td>
          <td id="d3"></td>
          <td id="d4"></td>
          <td id="d5"></td>
          <td id="d6"></td>
          <td id="d7"></td>
        </tr>
        <tr>
          <td id="d8"></td>
          <td id="d9"></td>
          <td id="d10"></td>
          <td id="d11"></td>
          <td id="d12"></td>
          <td id="d13"></td>
          <td id="d14"></td>
        </tr>
        <tr>
          <td id="d15"></td>
          <td id="d16"></td>
          <td id="d17"></td>
          <td id="d18"></td>
          <td id="d19"></td>
          <td id="d20"></td>
          <td id="d21"></td>
        </tr>
        <tr>
          <td id="d22"></td>
          <td id="d23"></td>
          <td id="d24"></td>
          <td id="d25"></td>
          <td id="d26"></td>
          <td id="d27"></td>
          <td id="d28"></td>
        </tr>
        <tr>
          <td id="d29"></td>
          <td id="d30"></td>
          <td id="d31"></td>
          <td id="d32"></td>
          <td id="d33"></td>
          <td id="d34"></td>
          <td id="d35"></td>
        </tr>,
        <tr>
          <td id="d36"></td>
          <td id="d37"></td>
          <td id="d38"></td>
          <td id="d39"></td>
          <td id="d40"></td>
          <td id="d41"></td>
          <td id="d42"></td>
        </tr>
      </tbody>
    </table>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="eventInfo">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="info-title"><?=$lg['YOUR_EVENTS_AT']?> <span id="event_day"></span>.<span id="event_month"></span>.<?=$y?></h4>
       </div>
       <div class="modal-body" id="info-body">
         <span id="event-info"></span>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal"><?=$lg['CLOSE']?></button>
       </div>
   </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script onLoad="loadCalender(<?=$y?>,<?=$m?>,<?=$d?>)" type="text/javascript" src="calender/js/calender.js"></script>
<script
			  src="https://code.jquery.com/jquery-3.2.1.min.js"
			  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
			  crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Da der Kalender bootstrap verwendet muss man auch bootstrap im Headberaeich einbinden, am einfachsten geht das über die Bootstrap CDN:

Code: Alles auswählen

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Unter den bootstrap stylesheet muss man noch die eigene Styledatei einbinden mit der man den Kalender angepasst hat, oder den Code halt direkt einstellen:

Code: Alles auswählen

      <style>
    .calender {
      width:95%;
      margin:auto;
    }
    .calender .table td {
      text-align: center;
    }
    .calender .table td > a {
      cursor: help;
    }
  </style>

Noch ein Code muss eingebunden werden, und zwar der php Teil, den einfach an erster stelle in der gewünschten Datei platziren, oder wenn anderer php Code schon drin ist, halt da wo platz ist.

Code: Alles auswählen

<?php
  require_once('calender/config.php');
  require_once('calender/'.$lang);

  $yearUp = false;
  $yearDown = false;
  if (isset($_REQUEST['m'])){
    # change the month because of the javascript month array [0..11]
    $m = intval($_REQUEST['m'])-1;
    if($m<0){
      $m=11;
      $yearDown = true;
    }
    if($m>11){
      $m=0;
      $yearUp = true;
    }
  } else {
    $m = date('n')-1;
  }
  if (isset($_REQUEST['y'])){
    $y = $_REQUEST['y'];
    if($yearUp){
      $y = intval($y)+1;
    }
    if($yearDown){
      $y = intval($y)-1;
    }
  } else {
    $y = date('Y');
  }
  if (isset($_REQUEST['d'])){
    $d = $_REQUEST['d'];
  } else {
    $d = 0;
  }
?>

Habe gerade gemerckt das man hier vieleicht etwas durcheinander kommen könnte, daher werde ich in den nächsten versionen versuchen das einbinden des Kalenders einfacher zu machen, oder man nutzt ein iframe, geht auch

[moni]

Danke Jasmin für ausführlichen Erklärung ..habe das so gefolgt und sieht so aus .. den Bootsrap link in den hedaer.php eingefügt und unten das kleine css.style

http://www.blicke1.de/event-kalender/kalender1.php

hier code wie ich das an die Seite platziert habe

Code: Alles auswählen

<?php
  require_once('calender/config.php');
  require_once('calender/'.$lang);

  $yearUp = false;
  $yearDown = false;
  if (isset($_REQUEST['m'])){
    # change the month because of the javascript month array [0..11]
    $m = intval($_REQUEST['m'])-1;
    if($m<0){
      $m=11;
      $yearDown = true;
    }
    if($m>11){
      $m=0;
      $yearUp = true;
    }
  } else {
    $m = date('n')-1;
  }
  if (isset($_REQUEST['y'])){
    $y = $_REQUEST['y'];
    if($yearUp){
      $y = intval($y)+1;
    }
    if($yearDown){
      $y = intval($y)-1;
    }
  } else {
    $y = date('Y');
  }
  if (isset($_REQUEST['d'])){
    $d = $_REQUEST['d'];
  } else {
    $d = 0;
  }
?>
<?php
  include("../design/header.php");
?>


 <h1><span style="color: #FF0000;">T</span><span style="color: #EB000C;">e</span><span style="color: #D70018;">r</span><span style="color: #C40024;">m</span><span style="color: #B00031;">i</span><span style="color: #9C003D;">n</span><span style="color: #890049;">k</span><span style="color: #750056;">a</span><span style="color: #620062;">l</span><span style="color: #4E006E;">e</span><span style="color: #3A007B;">n</span><span style="color: #270087;">d</span><span style="color: #130093;">e</span><span style="color: #0000A0;">r</span></h1>
 <div class="textfeld">
<div class="calender">
    <table class="table table-bordered">
      <thead>
        <tr>
          <td><a id="previusMonth" href="?y=<?=$y?>&m=<?=$m?>"><<</a></td>
          <td><center><span id="selectedMonth"></span></center></td>
          <td><a id="nextMonth" href="?y=<?=$y?>&m=<?=($m+2)?>">>></a></td>
          <td></td>
          <td><a id="previusYear" href="?y=<?=($y-1)?>&m=<?=($m+1)?>"><<</a></td>
          <td><center><span id="selectedYear"><?=$y?></span></center></td>
          <td><a id="nextYear" href="?y=<?=($y+1)?>&m=<?=($m+1)?>">>></a></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><?=$lg['MON']?></td>
          <td><?=$lg['TUE']?></td>
          <td><?=$lg['WED']?></td>
          <td><?=$lg['THU']?></td>
          <td><?=$lg['FRI']?></td>
          <td><?=$lg['SAT']?></td>
          <td><?=$lg['SUN']?></td>
        </tr>
        <tr>
          <td id="d1"></td>
          <td id="d2"></td>
          <td id="d3"></td>
          <td id="d4"></td>
          <td id="d5"></td>
          <td id="d6"></td>
          <td id="d7"></td>
        </tr>
        <tr>
          <td id="d8"></td>
          <td id="d9"></td>
          <td id="d10"></td>
          <td id="d11"></td>
          <td id="d12"></td>
          <td id="d13"></td>
          <td id="d14"></td>
        </tr>
        <tr>
          <td id="d15"></td>
          <td id="d16"></td>
          <td id="d17"></td>
          <td id="d18"></td>
          <td id="d19"></td>
          <td id="d20"></td>
          <td id="d21"></td>
        </tr>
        <tr>
          <td id="d22"></td>
          <td id="d23"></td>
          <td id="d24"></td>
          <td id="d25"></td>
          <td id="d26"></td>
          <td id="d27"></td>
          <td id="d28"></td>
        </tr>
        <tr>
          <td id="d29"></td>
          <td id="d30"></td>
          <td id="d31"></td>
          <td id="d32"></td>
          <td id="d33"></td>
          <td id="d34"></td>
          <td id="d35"></td>
        </tr>,
        <tr>
          <td id="d36"></td>
          <td id="d37"></td>
          <td id="d38"></td>
          <td id="d39"></td>
          <td id="d40"></td>
          <td id="d41"></td>
          <td id="d42"></td>
        </tr>
      </tbody>
    </table>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="eventInfo">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="info-title"><?=$lg['YOUR_EVENTS_AT']?> <span id="event_day"></span>.<span id="event_month"></span>.<?=$y?></h4>
       </div>
       <div class="modal-body" id="info-body">
         <span id="event-info"></span>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal"><?=$lg['CLOSE']?></button>
       </div>
   </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script onLoad="loadCalender(<?=$y?>,<?=$m?>,<?=$d?>)" type="text/javascript" src="calender/js/calender.js"></script>
<script
           src="https://code.jquery.com/jquery-3.2.1.min.js"
           integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
           crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 </div>
<br><br>

<?php
  include("../design/footer.php");
?>

[Jasko]

Hallo moni, ich habe mir mal deinen Quellcode angeschaut, genauer den CSS Code, und dort habe ich gefunden das du den Kalender in der Box3 gemacht hast. Diese box drei hat eine width von 90%, wir diese auf 100% gestellt dann sieht die seite normal aus.

MFG