Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]Kalendarz JS, Kalendarz JS
piotrek998
post
Post #1





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 27.04.2018

Ostrzeżenie: (0%)
-----


Witam. Odwzorowuje strone ciach i tam jest kalendarz. Napisałem kod html
  1. <div class="wow fadeIn content calendar">
  2. <h1>Kalendarium <b>KWIECIEŃ 2018</b></h1>
  3.  
  4. <form action="" method="post" class="prev_month">
  5. <input type="image" src="prev_cal.jpg" />
  6. <input type="hidden" name="year" value="2018" />
  7. <input type="hidden" name="month" value="04" />
  8. <input type="hidden" name="action_calc" value="prev_cal" />
  9. </form>
  10.  
  11. <form action="" method="post" class="next_month">
  12. <input type="image" src="next_cal.jpg" />
  13. <input type="hidden" name="year" value="2018" />
  14. <input type="hidden" name="month" value="04" />
  15. <input type="hidden" name="action_calc" value="next_cal" />
  16. </form>
  17.  
  18. <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span class="today">26</span><span>27</span><span>28</span><span>29</span><span>30</span>
  19. </div>


oraz css
  1. .calendar{
  2. padding:10rem 0;
  3. text-align:center;
  4. position:relative;
  5. }
  6.  
  7. .calendar span,
  8. .calendar a{
  9. width:3%;
  10. text-align:center;
  11. display:inline-block;
  12. text-decoration:none;
  13. line-height:7rem;
  14. background: #F2F2F2;
  15. }
  16.  
  17. .calendar a.entry{
  18. background:#2e3b59;
  19. color:#fff;
  20. position:relative;
  21. }
  22.  
  23. .calendar .today{
  24. background:#e4e4e4;
  25. font-weight:bold;
  26. }
  27.  
  28. .calendar a.entry .info img{
  29. position:absolute;
  30. top:-10px;
  31. left:50%;
  32. transform:translate(-50%,0);
  33. }
  34.  
  35. .calendar a.entry .info{
  36. display:none;
  37. padding:1rem 2rem;
  38. color:#fff;
  39. background:#2e3b59;
  40. font-size:2rem;
  41. text-align:center;
  42. text-decoration:none;
  43. position:absolute;
  44. bottom:-11rem;
  45. z-index:99999999999999;
  46. left:50%;
  47. white-space:nowrap;
  48. transform:translate(-50%,0);
  49. box-shadow: 7px 6px #c8c8c8;
  50. }
  51.  
  52. .calendar a.entry:hover{
  53. text-decoration:none;
  54. }
  55.  
  56. .calendar a.entry:hover .info{
  57. display:block;
  58. }
  59.  
  60. .calendar .prev_month{
  61. position:absolute;
  62. left:5px;
  63. bottom:11rem;
  64. }
  65. .calendar .next_month{
  66. position:absolute;
  67. right:5px;
  68. bottom:11rem;
  69. }

błagam o pomoc z javascript bo dopiero zaczynam i jestem kompletnie zielony z js. Skrypt ma za zadanie zwracać obecny dzień miesiąc oraz rok oraz za pomocą strzałek w przód i w tył umożliwiać zmiane miesiąca czyli jak mamy teraz kwiecień to gdy klikne następny miesiąc ma być maj a gdy klikne w tył ma być kwiecień itd. Błagam o jakiś kod z tym js bo naprawde próbowalem sam to ogarnąć ale nie działało tak jak trzeba. Błagam o pomoc.
Powód edycji: [Kshyhoo]: seo bb-code
Go to the top of the page
+Quote Post
Kshyhoo
post
Post #2





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że




Witamy na Forum. Zapoznaj się z panującymi tu zasadami, żeby uniknąć blokady postów. Szczególnie pierwsza linijka mojej sygnatury...

Na tej stronie nie widzę kalendarza, więc usuwam linki.
Twój kod nie zawiera JS, więc gdzie tkwi problem?
Go to the top of the page
+Quote Post
Pyton_000
post
Post #3





Grupa: Zarejestrowani
Postów: 8 068
Pomógł: 1414
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----


@kshyhoo na samym dole był (IMG:style_emoticons/default/wink.gif) Taki "kalendarz" w postaci samych dat w 1 wierszu. Pewnie wydarzenia miały się pojawiać niżej ale albo coś nie pykło albo nic nie ma (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
piotrek998
post
Post #4





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 27.04.2018

Ostrzeżenie: (0%)
-----


Nie chodi mi o kod html i css lecz o sam javascript. Przecież wszystko wyjaśniłem w poście. Żadanego htmla i cssa tylko czysty js.

Ten post edytował piotrek998 29.04.2018, 16:57:18
Go to the top of the page
+Quote Post
wxm
post
Post #5





Grupa: Zarejestrowani
Postów: 26
Pomógł: 1
Dołączył: 17.02.2018

Ostrzeżenie: (0%)
-----


Musisz się podpiąć np pod keypress i zmieniać wartości sprawdzając czy nowa wartość mieści się w założonym zakresie (miesiąc 1 - 12, dzień 1 - 31 w zależności od wybranego miesiąca i roku) i tyle (IMG:style_emoticons/default/smile.gif) Nie widziałem oryginału więc ciężko stwierdzić jak tam było zrobione ale mając dostęp do strony można to sprawdzić przecież w 5 minut jak zrobiony był oryginał (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
Kshyhoo
post
Post #6





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że




(IMG:style_emoticons/default/thumbsdownsmileyanim.gif)
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 25.12.2025 - 02:41