How to make a calendar?

Discussion in 'HTML & Website Design' started by GrandMasterK, Dec 2, 2015.

  1. #1
    Right now my website has google calendar embedded in it. The functionality is ideal but the look of it make sthe page look really bad (the style doesn't match the website). So I'm wondering, is there either A. A way to really customize google calendar to fit the theme of the website or B. Relatively easy way to design something similar? Perhaps a way to link it google calendar so that it can be updated from google calendars?
     
    GrandMasterK, Dec 2, 2015 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,280
    Likes Received:
    1,696
    Best Answers:
    31
    Trophy Points:
    475
    #2
    I don't know what options your calendar should have, but if you need a basic jquery calendar you can use this one:

    http://jsfiddle.net/teN8U/48/

    A somewhat advanced one:

    http://jsfiddle.net/Vgfwv/

    I am not the author of either one of them, so if something doesn't work right, I won't be able to help you.
     
    qwikad.com, Dec 2, 2015 IP
  3. GrandMasterK

    GrandMasterK Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    I think that will work! Thank you very much!
     
    GrandMasterK, Dec 2, 2015 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,280
    Likes Received:
    1,696
    Best Answers:
    31
    Trophy Points:
    475
    #4
    No problem. Make sure you use the source code (not just what you see there). I assume you're familiar with jsfiddle. You can copy the source code if you do the right click around the calendar then copy the FRAME SOURCE code. For instance this is the full source of that basic calendar:

    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http:\\jqwidgets.com\jquery-widgets-demo\jqwidgets\globalization/globalize.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <link rel="stylesheet" type="text/css" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
    <link rel="stylesheet" type="text/css" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
    
    <script type='text/javascript'>//<![CDATA[
    $(window).load(function(){
    $("#jqxCalendar").jqxCalendar({
    theme: 'energyblue',
    width: '200px',
    height: '200px',
    stepMonths: 3
    });
    });//]]>
    </script>
    
    <div id="jqxCalendar"></div>
    
    
    Code (markup):
     
    qwikad.com, Dec 2, 2015 IP
  5. Hiltonlove

    Hiltonlove Banned

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Instead of having it made, why don't you try making one yourself? I always try to give personalized gifts when I have the time; they are always appreciated because it comes from the heart. What you can do is find first a simple calendar where you can put the picture of your dog on it. Print your dog's picture, slap it on, then make the entire package very nice and presentable by adding nice edge trimmings, fun captions, etc. Try it, it will be fun to do :) And don't worry if it's not perfect, it's always the thought that counts.
     
    Hiltonlove, Dec 4, 2015 IP