Create a transparent Calendar with Tapku Calendar

Question

First I wanna say thanks for all the helpful answers on this site. I starting programming about six months ago and many of the things I've learned have been from questions/answers here.

I'm using the Calendar from Tapku Library in an iPhone project and want the calendar tiles to be transparent so that I can see the view behind my TKCalendarMonthView view.

I implemented the TKCalendarMonthView using the code from this tutorial by Benjamin Pearson.

Then I removed the tile images and tried code from this answer by @Jacques, so the drawrect function in TKCalendarMonthView.m looks like this:

- (void) drawRect:(CGRect)rect {

//From Jacques' StackOverflow answer (I also put this in the init)
self.opaque = NO;
self.backgroundColor = [UIColor clearColor];


//From Jacques' answer
[[UIColor clearColor] setFill
 ];
UIRectFill(rect);

//Remove CGContextRef
    //CGContextRef context = UIGraphicsGetCurrentContext();
    //UIImage *tile = [UIImage imageWithContentsOfFile:TKBUNDLE(@"TapkuLibrary.bundle/Images/calendar/Month Calendar Date Tile.png")];

CGRect r = CGRectMake(0, 0, 46, 44);

//From Jacques' StackOverflow answer
[[UIColor clearColor] setFill];
UIRectFill(r);

//Remove this sense we won't use the tile image
//CGContextDrawTiledImage(context, r, tile.CGImage);


if(today > 0){
    int pre = firstOfPrev > 0 ? lastOfPrev - firstOfPrev + 1 : 0;
    int index = today +  pre-1;
    CGRect r =[self rectForCellAtIndex:index];
    r.origin.y -= 7;

    //Don't use image here
    //[[UIImage imageWithContentsOfFile:TKBUNDLE(@"TapkuLibrary.bundle/Images/calendar/Month Calendar Today Tile.png")] drawInRect:r];
}

int index = 0;

UIFont *font = [UIFont boldSystemFontOfSize:dateFontSize];
UIFont *font2 =[UIFont boldSystemFontOfSize:dotFontSize];

//Change the font for our dates:
font = [UIFont fontWithName:@"HelveticaNeue-Light" size:dateFontSize];
font2 = [UIFont fontWithName:@"HelveticaNeue-Light" size:dateFontSize];
UIColor *color = [UIColor grayColor];

if(firstOfPrev>0){
    [color set];
    for(int i = firstOfPrev;i<= lastOfPrev;i++){
        r = [self rectForCellAtIndex:index];
        if ([marks count] > 0)
            [self drawTileInRect:r day:i mark:[[marks objectAtIndex:index] boolValue] font:font font2:font2];
        else
            [self drawTileInRect:r day:i mark:NO font:font font2:font2];
        index++;
    }
}

//Set the color for all dates in the current month that are not today
color = [UIColor colorWithRed:59/255. green:73/255. blue:88/255. alpha:1];


[color set];
for(int i=1; i <= daysInMonth; i++){

    r = [self rectForCellAtIndex:index];
    if(today == i) [[UIColor whiteColor] set];

    if ([marks count] > 0) 
        [self drawTileInRect:r day:i mark:[[marks objectAtIndex:index] boolValue] font:font font2:font2];
    else
        [self drawTileInRect:r day:i mark:NO font:font font2:font2];
    if(today == i) [color set];
    index++;
}

[[UIColor grayColor] set];
int i = 1;
while(index % 7 != 0){
    r = [self rectForCellAtIndex:index] ;
    if ([marks count] > 0) 
        [self drawTileInRect:r day:i mark:[[marks objectAtIndex:index] boolValue] font:font font2:font2];
    else
        [self drawTileInRect:r day:i mark:NO font:font font2:font2];
    i++;
    index++;
}

}

The problem is that now the tiles (CGRects) are black; or whatever view is directly behind the them is black, and, frankly, I'm a bit lost in Tapku's code. Does anyone know why the tiles are black? Or where in the Tapku code I should be looking? I'm not very familiar with Core Graphics, so maybe I'm missing something basic/obvious.

NOTE: I also tried changing the color of TKCalendarMonthView's tileBox (which is a UIScrollView that seems to contain the calendar tiles) and although it did change color it didn't effect the tiles' background color.

Thanks in advance! And please let me know if any of this is unclear.

Answer 1

You can transparent calendar tiles by following steps

Step-1

Comment the code in TKCalendarMonthView.m

+ (void) initialize{
    if (self == [TKCalendarMonthTiles class]){
        //tileImage = [UIImage imageWithContentsOfFile:TKBUNDLE(@"calendar/Month Calendar Date Tile.png")];
    } 
}

Step-2

Change the code in TKCalendarMonthView.m

add line of code [self.currentTile setBackgroundColor:[UIColor clearColor]];

before the line [self.tileBox addSubview:self.currentTile];

in method - (void) _setupCurrentTileView:(NSDate*)date

so your code look like

- (void) _setupCurrentTileView:(NSDate*)date{

    ....

    [self.currentTile setBackgroundColor:[UIColor clearColor]];
    [self.tileBox addSubview:self.currentTile];

    ....

}

Answer 2

Finally I get how to make the background color clear in calender view.

Change code as below.

In TKCalendarMonthView.m

(1) Comment/remove below line.

+ (void) initialize
{
     if (self == [TKCalendarMonthTiles class])
     {
    //tileImage = [UIImage imageWithContentsOfFile:TKBUNDLE(@"calendar/Month Calendar Date Tile.png")];   COMMENT THIS LINE
     } 
}

(2) In - (void) _setupCurrentTileView:(NSDate*)date method
Add [self.currentTile setBackgroundColor:[UIColor clearColor]]; line as below

- (void) _setupCurrentTileView:(NSDate*)date{
if(self.currentTile) return;

NSDate *month = [date firstOfMonthWithTimeZone:self.timeZone];
NSArray *dates = [TKCalendarMonthTiles rangeOfDatesInMonthGrid:month startOnSunday:self.sunday timeZone:self.timeZone];
NSArray *data = [self.dataSource calendarMonthView:self marksFromDate:dates[0] toDate:[dates lastObject]];

self.currentTile = [[TKCalendarMonthTiles alloc] initWithMonth:month marks:data startDayOnSunday:self.sunday timeZone:self.timeZone];
[self.currentTile setTarget:self action:@selector(_tileSelectedWithData:)];

[self.currentTile setBackgroundColor:[UIColor clearColor]]; // ADD THIS LINE
[self.tileBox addSubview:self.currentTile];

self.monthYear.text = [date monthYearStringWithTimeZone:self.timeZone];
[self _updateSubviewFramesWithTile:self.currentTile];

}