CODEWITHSUNDEEP
javascripthtmlcss
Dot_NET Pro
Dot_NET Pro

Reputation: 2123

HTML CSS Alignment inside td

I am doing some custom CSS with Jquery-UI date picker.

I have one requirement to display a dot below each date on calender to indicate some kind of ratings:

enter image description here

I am creating the dots dynamically as:

  <strong>.</strong>

I want to display all the dots closed to the dates like Sunday 1, but I cannot find a way to dynamically align each dots with every date.

Upvotes: 0

Views: 114

Answers (1)

Pete
Pete

Reputation: 58422

If you are just trying to put the dots inside your grey bit then you can change your js code (I noticed you are using jQuery so have rewritten to use it):

var table = $(".ui-datepicker-calendar").eq(0);
var tds = table.find("td");

tds.each(function(i) {
    var link = $(this).find('a');
    if (link.length > 0) {
        var rating = 5; // add your rating functionality here
        switch (rating)
        {
            case 1:
                link.addClass('dot one');
                break;
            case 2:
                link.addClass('dot two');
                break;
            case 3:
                link.addClass('dot three');
                break;
            case 4:
                link.addClass('dot four');
                break;
            case 5:
                link.addClass('dot five');
                break;
        }
    }
});

and use the following styles:

.dot.one:after {content:'.';}
.dot.two:after {content:'..';}
.dot.three:after {content:'...';}
.dot.four:after {content:'....';}
.dot.five:after {content:'.....';}
.dot:after {display:block; color:#081ae4; font-weight:bold;}

This way your click functionality won't lose the date - Example

Upvotes: 1

Related Questions